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

Unfortun

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

Answer 2

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.

Answer 3

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