CODEWITHSUNDEEP
javascriptjquery
Roger Lipscombe
Roger Lipscombe

Reputation: 91815

Escaping text with jQuery append?

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?

Upvotes: 21

Views: 16283

Answers (3)

Matt
Matt

Reputation: 2230

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/>').text('your content here').appendTo('div#someid')

Upvotes: 9

binki
binki

Reputation: 8308

If you really want to get jQuery to escape some text to an HTML fragment and don’t want to touch document directly yourself, the following pure jQuery can escape text to HTML for you (but only in an HTML context):

jQuery('<p/>').text('v & M_FLAG == M_FLAG').html()

This can be used to append text quite inefficiently:

jQuery('#message').append(jQuery('<p/>').text(item).html());

There will be no extra <p/> element inserted because .html() returns the HTML-formatted contents of an element, excluding the element itself.

Based on jQuery’s lack of a built-in way to instantiate text nodes, I think jQuery’s authors expect users to directly use document.createTextNode() as shown in an earlier answer.

Upvotes: 0

Paolo Bergantino
Paolo Bergantino

Reputation: 488354

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

Upvotes: 32

Related Questions