JavaScript:输出符号和特殊字符 [英] JavaScript:output symbols and special characters

问题描述

我正在尝试使用 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:

<块引用>

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("
foo
");document.createElement("div").textContent = "<div>foo</div";document.createElement("div").innerHTML = "<div>foo</div>";

第一个使用文字字符 "<div>foo</div>"创建一个文本节点.第二个将新元素的内容逐字设置为 "

foo

".另一方面，第三个在包含文本 "foo" 的新元素内创建一个实际的 div 元素.

I am trying to include some symbols into a div using JavaScript.
It should look like this:

x ∈ ℝ

, but all I get is: x ∈ ℝ.

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

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

I had tried document.getElementById("something").innerHTML="x ∈ ℝ" and it worked, so I have no clue why createTextNode method did not.

What should I do in order to output the right thing?

解决方案

You are including HTML escapes ("entities") in what needs to be text. According to the docs for createTextNode:

data is a string containing the data to be put in the text node

That's it. It's the data to be put in the text node. The DOM spec is just as clear:

Creates a Text node given the specified string.

You want to include Unicode in this string. To include Unicode in a JavaScript string, use Unicode escapes, in the format \uXXXX.

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

Or, you could simply include the actual Unicode character and avoid all the trouble:

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

In this case, just make sure that the JS file is served as UTF-8, you are saving the file as UTF-8, etc.

The reason that setting .innerHTML works with HTML entities is that it sets the content as HTML, meaning it interprets it as HTML, in all regards, including markup, special entities, etc. It may be easier to understand this if you consider the difference between the following:

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

The first creates a text node with the literal characters "<div>foo</div>". The second sets the content of the new element literally to "<div>foo</div>". The third, on the other hand, creates an actual div element inside the new element containing the text "foo".

这篇关于JavaScript:输出符号和特殊字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！