JavaScript：输出符号和特殊字符

Question

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

var div=document.getElementById("text");
var textnode = document.createTextNode("x ∈ ℝ");					
div.appendChild(textnode); 

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

我已经尝试过document.getElementById("something").innerHTML="x ∈ ℝ"并且成功了，所以我不知道为什么createTextNode方法不起作用。

我应该怎么做才能输出正确的东西？

Answer 1

您在需要为文本的内容中包含 HTML 转义符（“实体”）。根据文档createTextNode：

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

就是这样。这是要放入文本节点的数据。该DOM规范同样明显：

给定指定的字符串创建一个 Text 节点。

您希望在此字符串中包含 Unicode。要在 JavaScript 字符串中包含 Unicode，请使用Unicode 转义符 ，格式为\uXXXX.

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包含 text 的新元素内创建一个实际元素"foo"。

Answer 2

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

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