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

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));