Question

我正在尝试使用JavaScript将一些符号包含到div中它看起来应该是这样的：x∈ℝ，但我得到的只有：x ∈ &reals;。

＆＃13;

var div=document.getElementById("text");
var textnode = document.createTextNode("x &#8712; &reals;");					
div.appendChild(textnode);

＆＃13;

<div id="text"></div>

＆＃13;

我曾尝试document.getElementById("something").innerHTML="x ∈ &reals;"并且它有效，所以我不知道为什么createTextNode方法没有。

为了输出正确的东西我该怎么办？

Answer 1

您需要在文本中包含HTML转义符（“实体”）。根据{{3}}的文档：

data是一个字符串，包含要放入文本节点
的数据

就是这样。它是要放在文本节点中的数据。 createTextNode同样明确：

在给定指定字符串的情况下创建Text节点。

您希望在此字符串中包含Unicode。要在JavaScript字符串中包含Unicode，请使用\uXXXX格式的DOM spec。

var textnode = document.createTextNode("x \u2208 \u211D");

或者，您可以简单地包含实际的Unicode字符并避免所有麻烦：

var textnode = document.createTextNode("x ∈ ℝ");

在这种情况下，只需确保JS文件作为UTF-8提供，您将文件保存为UTF-8等。

设置.innerHTML与HTML实体一起使用的原因是它将内容设置为HTML，这意味着它在所有方面都将其解释为HTML，包括标记，特殊实体等。它可能更容易理解如果你考虑以下几点之间的区别：

document.createTextNode("<div>foo</div>");
document.createElement("div").textContent = "<div>foo</div";
document.createElement("div").innerHTML = "<div>foo</div>";

第一个创建一个带有文字字符 "<div>foo</div>"的文本节点。第二个将新元素的内容字面设置为"<div>foo</div>"。另一方面，第三个元素在包含文本div的新元素中创建一个实际的"foo"元素。

Answer 2

document.createTextNode将自动html转义所需的字符。您必须将这些文本作为JavaScript字符串提供，无论是否转义：

＆＃13;

document.body.appendChild(document.createTextNode("x ∈ ℝ"));
document.body.appendChild(document.createElement("br"));
document.body.appendChild(document.createTextNode("x \u2208 \u211d"));

＆＃13;

编辑：createTextNode函数不会在这里执行实际的html转义，因为它并不需要。 @deceze对dom和html之间的联系做了很好的解释：html是dom的文本表示，因此当你直接操作dom时，你不需要任何与html相关的转义。

Answer 3

每个字符都有一个十六进制名称（例如0211D）。如果您想将其转换为HTML实体，请添加&#x =＆gt; ℝ或使用实体名称&reals;或小数名ℝ，可在此处找到：http://www.w3schools.com/charsets/ref_html_entities_4.asp

但是当您使用JavaScript时，为了使浏览器了解您要输出unicode符号而不是字符串，需要使用转义实体。为此，请在十六进制名称=＆gt; \u之前添加\u211D;。

JavaScript：输出符号和特殊字符

3 个答案: