如何使浏览器不解析从JavaScript添加的新HTML代码

Question

I want to add some text to my webpage from my server with ajax, but the text includes some html tags, and browsers tend to parse that code and render it. I don't want this behavior, i want to appent that text without parsing the html tags. Is there way to accomplish this?

Answer 1

you have to encode the returned "HTML". basically you have to replave < , > and & with < , > and & .

if you're using PHP on serverside, for example, you could do this using htmlspecialchars() - there might be similar functions or methods available for other languages ( cgi.escape for python, HTML:Entities for Perl, System.Web.HttpUtility.HtmlEncode for asp.net ...).

if you do this on a retuned string that looks like

this is <strong>bold</strong> text

wich is shown in your browser as

this is bold text

your output will change to

this is <strong>bold</strong> text

wich will display as

this is <strong>bold</strong> text

Answer 2

Use node.textContent property (element.innerText on IE<=8) to assign textual content to an element. Browser will encode all special characters into the respective HTML entities:

var h1 = document.getElementsByTagName("h1")[0];
if (typeof h1.textContent != "undefined") {
    h1.textContent = "<b>Hello World</b>";
}
else if (typeof h1.innerText != "undefined") {
    h1.innerText = "<b>Hello World</b>";
}
alert(h1.innerHTML);​
// at this point, the h1 tag will "render" <b>Hello World</b>
// not the text Hello World in bold face
// inspecting the element will reveal that html tags, e.g. <b>
// were converted to &lt;b&gt;

demo

Answer 3

In browser-side javascript:

function htmlEncode( str )  {
    str = str + "";
    var el = document.createElement("div");
    el.appendChild( document.createTextNode( str ) );
    return el.innerHTML;
}

htmlEncode( "<div></div>" );
//"&lt;div&gt;&lt;/div&gt;"