javascript 如何将 HTML 作为文本插入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5617260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert HTML as Text
提问by foobar
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.
例如，我希望 HTML<p>以纯文本形式显示，而不是被浏览器解释为实际标签。
I know JQuery has .html and .text, but how is this done in raw JS?
我知道 JQuery 有 .html 和 .text，但这是如何在原始 JS 中完成的？
There are functions like encodeURIComponent that encodes <p>to %3Cp%3Ebut if I just put that into HTML, it interprets it literally as %3Cp%3E.
有像 encodeURIComponent 这样的函数编码<p>为，%3Cp%3E但如果我只是把它放到 HTML 中，它会将它的字面解释为%3Cp%3E.
So there are also things like >and <, they work but I can't find any JavaScript functions that escapes & unescapes from this.
所以也有像>and 之类的东西<，它们可以工作，但我找不到任何可以从它转义和取消转义的 JavaScript 函数。
Is there a correct way to show HTML as text with raw JavaScript?
有没有正确的方法将 HTML 显示为带有原始 JavaScript 的文本？
回答by David Tang
There's no need to escape the characters. Simply use createTextNode:
没有必要对字符进行转义。只需使用createTextNode：
var text = document.createTextNode('<p>Stuff</p>');
document.body.appendChild(text);
See a working example here: http://jsfiddle.net/tZ3Xj/.
在此处查看一个工作示例：http: //jsfiddle.net/tZ3Xj/。
This is exactly how jQuery does it (line 43 of jQuery 1.5.2):
这正是 jQuery 的做法（jQuery 1.5.2 的第 43 行）：
return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
回答by thirtydot
The function used by Prototype looks like a good start:
Prototype 使用的函数看起来是一个好的开始：
http://www.prototypejs.org/api/string/escapeHTML
http://www.prototypejs.org/api/string/escapeHTML
function escapeHTML() {
return this.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
Version more suited to use outside Prototype:
更适合在原型之外使用的版本：
function escapeHTML(html) {
return html.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
回答by Jitesh
i suggest to use pre tag of html
我建议使用 html 的 pre 标签
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...
只需将上面的代码复制并粘贴到 pre 中，它就可以正常工作...
回答by Andrew Shepherd
This is a job for the method createTextNode
这是createTextNode方法的工作
var target div = document.getElementById('div1');
targetDiv.appendChild(document.createTextNode('<p>HelloWorld</p>'));
回答by PsychoX
You can use aslo innerTextfrom most of DOM elements:
您可以innerText从大多数 DOM 元素中使用 aslo ：
document.getElementById('some').innerText = "There can be <b> even HTML tags </b>";
The tags will not be formatted. You can aslo use \nfor new line and more codes (\t, \u2623...). If you want aslo to use fixed-size characters you can use easy <pre>tag.
标签不会被格式化。您也可以用于\n换行和更多代码（\t，\u2623...）。如果您希望也使用固定大小的字符，您可以使用简单的<pre>标签。
