How to append/prepend/create a text node with jQuery

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

Answer 2

$.text() accepts also a function as parameter. This function will receive an index and the current text. The return value of the function will be set as the new text.

.text( function )

function
Type: Function( Integer index, String text ) => String
A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

$("li").text(function(idx, txt) {     return txt + " <item>";  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <ul>      <li>1</li>      <li>2</li>      <li>3</li>  </ul>