JavaScript：输出符号和特殊字符

我正在尝试使用 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 方法不起作用。

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

您将 HTML 转义符（“实体”）包含在需要为文本的内容中。根据文档createTextNode https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode:

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

就是这样。它是要放入文本节点的数据。这DOM spec https://www.w3.org/TR/DOM-Level-3-Core/core.html同样清楚的是：

在给定指定字符串的情况下创建一个文本节点。

您希望在此字符串中包含 Unicode。要在 JavaScript 字符串中包含 Unicode，请使用Unicode 转义 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation，格式为\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包含文本的新元素内的元素"foo".