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