Question

Possible Duplicate:
Escaping text with jQuery append?

My HTML is somewhat like this:

<div id="selector">Hello World</div>

Now I’d like to append some text to this div. I know that I could simply use

$('#selector').append(text);

but this wouldn’t escape any special characters in text. Another way is to wrap the text in a span:

$('#selector').append( $('<span>').text(text) );

But this is ugly, because it creates unnecessary markup. So my current solution is to manually create a TextNode:

$('#selector').append( document.createTextNode(text) );

I was wondering whether there is any jQuery-style way to do this?

Answer 1

The createTextNode approach is probably the best way to go. If you want to have a jQuery-ish syntax, you could make a plugin.

$.fn.appendText = function(text) {
    return this.each(function() {
        var textNode = document.createTextNode(text);
        $(this).append(textNode);
    });
};