8

I'm used to using jQuery's .append() method to add text or HTML onto the end of a pre-existing element. I'm currently using jQuery's .text() to escape strings that could potentially contain HTML. Unfortunately, there doesn't seem to be a jQuery method that will append the results of the .text() method to an element instead of replacing its contents.

Is there a way to append, instead of replace, this escaped text to an element? Or is there a better way to escape strings containing HTML?

Thanks.

- EDIT -

A little more context: I'm building an HTML string dynamically, and so I'll need to be able to add multiple elements with escaped content programmatically.

Nathan Friend
  • 12,155
  • 10
  • 75
  • 125
  • 2
    You could always just escape the HTML separately, a la http://stackoverflow.com/questions/6020714/escape-html-using-jquery etc. – Dave Newton Aug 14 '12 at 17:26

3 Answers3

8

As I have tried many ways, I think the following method is the cleanest way to add text to whatever node you want. no stock tag needed, only plain text, which will help to avoid potential problems

$(document.createTextNode("SomePlainText")).appendTo(p);
6

You could create a dummy element to hold the result of .text() which can then be appended to your destination element:

$('<div/>').text('your <span>html</span> string').appendTo(...);
João Silva
  • 89,303
  • 29
  • 152
  • 158
  • Good idea. I'll use this with one slight modification - `$('
    ').text('your html string').html();`. That way I don't get the actual dummy element in with the text.     – Nathan Friend Aug 14 '12 at 17:38
  • 2
    As a side note, you could also use `document.createTextNode` and append that. – pimvdb Aug 14 '12 at 18:36
1

You could just use

$(whatever).text($(whatever).text() + whatever_you_want_to_append);

EDIT for the fiddle in my comment, try this:

for ( /* some looping parameters */ ) {
    $('<li></li>') // create an li
        .text(stringWithHtml) // pass it the text, as text not html
        .appendTo('#thisIsWhatINeed'); // append it where you want it
}

jsFiddle

KRyan
  • 7,308
  • 2
  • 40
  • 68