How to insert HTML as Text

Question

I want HTML, for example, <p>, to show show as just that, in plain text, and not interpreted by the browser as an actual tag.

I know JQuery has .html and .text, but how is this done in raw JS?

There are functions like encodeURIComponent that encodes <p> to %3Cp%3E but if I just put that into HTML, it interprets it literally as %3Cp%3E.

So there are also things like > and <, they work but I can't find any JavaScript functions that escapes & unescapes from this.

Is there a correct way to show HTML as text with raw JavaScript?

• mplungjan: I personally use the deprecated but working tag XMP like this: document.getElementById('someDiv').innerHTML='<xm'+'p><h1>Here is some <i>HTML</i></h1></xmp>'

Answer 1

There's no need to escape the characters. Simply use createTextNode:

var text = document.createTextNode('<p>Stuff</p>');
document.body.appendChild(text);

See a working example here: http://jsfiddle.net/tZ3Xj/.

This is exactly how jQuery does it (line 43 of jQuery 1.5.2):

return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );

• thirtydot: Do you know why Prototype would be doing it the way that they are if this (better looking) technique works?
• David Tang: @thirtydot, does Prototype use escaping when inserting text into the DOM or is that just a utility function? I can imagine escaping to have its uses elsewhere.
• foobar: Maybe createTextNode does escaping itself? Anyway, that's the function I need. Thanks.
• Frobozz: .innerText will create and append the text node for you.

Answer 2

The function used by Prototype looks like a good start:

http://www.prototypejs.org/api/string/escapeHTML

function escapeHTML() {
 return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

Version more suited to use outside Prototype:

function escapeHTML(html) {
 return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

Answer 3

You can use aslo innerText from most of DOM elements:

document.getElementById('some').innerText = "There can be <b> even HTML tags </b>";

The tags will not be formatted. You can aslo use \n for new line and more codes (\t, \u2623...). If you want aslo to use fixed-size characters you can use easy <pre> tag.

Answer 4

This is a job for the method createTextNode

var target div = document.getElementById('div1');
targetDiv.appendChild(document.createTextNode('<p>HelloWorld</p>'));

Answer 5

i suggest to use pre tag of html

and you can convert your using this link

e.g if you copy

<p>Hi </p>

it will give you converted code as...

<p>Hi </p>

Just copy and paste above code in pre and it will work fine...