Question

84

Escaping text with jQuery append?

rated 0 times [ 88] [ 4] / answers: 1 / hits: 16027 / 15 Years ago, wed, june 3, 2009, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

magaly

Add To Favorites

Follow

Total Points: 524

Total Questions: 96

Total Answers: 89

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

answered 15 Years ago sonja · Accepted Answer

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