显示方式 <input type=''text'> 没有在jQuery中创建一个文本框？

Question

I have a comment box(textarea) in which the user types something and when he hits enter that thing is automatically displayed in 'comment section'. Now when the user hits submit I'm executing the following code,

var comment = $("#commentBox").val();
var commentSection = $("#commentSection");
comment.appendTo(commentSection);

By the above code the comment typed by user is dynamically displayed in the commentSection . This works fine but when user types something like,

<input type='text'>

in the comment box then a textbox is created within the comment section. So is there a way through which I could not let this happen? Thanks in advance.

Answer 1

One way would be to just append the data as .text

Something like this:

var comment = $("#commentBox").val();
var commentSection = $("#commentSection");
commentSection.text(comment);

Edit: To append to an existing part of the comment, replace:

commentSection.text(comment);

with:

commentSection.text(commentSection.text() + comment);

Answer 2

You have to convert the string to entities. Define this function:

function htmlencode(str) {
    return str.replace(/[&<>"']/g, function($0) {
        return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
    });
}

Then run the following code when the user hits enter:

var comment = htmlencode($("#commentBox").val());
var commentSection = $("#commentSection");
comment.appendTo(commentSection);

Answer 3

尝试这个 ，

div.insertAdjacentHTML( 'beforeend', comment);

Answer 4

You can use

var commentText = $("#commentBox").text();

but this do not clean html tags on your string, additionally you can use a function to do this

function RemoveHTMLTags(vals) {
            var regX = /(<([^>]+)>)/ig;
            var html = vals;
            return (html.replace(regX, ""));
        }

and then you use:

var finalComment = RemoveHTMLTags(commentText);