Escaping text with jQuery append?

Question

I know that I can use $.html to set the HTML content of something, and $.text to set the content (and that this escapes the HTML).

Unfortunately, I'm using $.append, which doesn't escape the HTML.

I've got something like this:

function onTimer() {
    $.getJSON(url, function(data) {
        $.each(data, function(i, item) {
           $('#messages').append(item);
        }
    }
}

...where the url returns an array of strings. Unfortunately, if one of those strings is (e.g.) <script>alert('Hello')</script>, this gets executed.

How do I get it to escape HTML?

Answer 1

You're appending an element which already has content? Or you're adding the content after you append? Either way, you still need to do .text(...) on that element.

If you're using append and passing HTML as the argument, then try creating the element first, and passing it to append.

Ex:

$('<div></div>').text('your content here').appendTo('div#someid')

Answer 2

Check out how jQuery does it:

text: function( text ) {
 if ( typeof text !== "object" && text != null )
  return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );

 var ret = "";

 jQuery.each( text || this, function(){
  jQuery.each( this.childNodes, function(){
   if ( this.nodeType != 8 )
    ret += this.nodeType != 1 ?
     this.nodeValue :
     jQuery.fn.text( [ this ] );
  });
 });

 return ret;
},

So something like this should do it:

$('#mydiv').append(
    document.createTextNode('<b>Hey There!</b>')
);

EDIT: Regarding your example, it's as simple as:

$('#messages').append(document.createTextNode(item));