如何使用具有textContent属性的实体

Question

我可以帮助您翻译以下内容：

我希望使用JavaScript设置元素的文本内容。如果我这样做：

var el = document.getElementById('my-element')
el.textContent = '×' 

结果如下：

<div id="my-element">&amp;times;</div>

我尝试使用\&代替，但没有效果。我应该怎样才能将实体插入文本内容中呢？

- Scribblemacher

---

el.innerHTML = '×' - j08691

@RandyCasburn 问题已更新；那些是问题中的笔误，而不是代码。 - Scribblemacher

@j08691 那个方法可以用，但我想知道为什么 textContent 不起作用。 - Scribblemacher

太棒了。很高兴能帮忙。 - Randy Casburn

"×" 是一个 HTML 实体，因此要将其显示为实体本身，而不仅仅是文本，您需要使用 innerHTML。 - j08691

Answer 1

textContent方法不会解析包含在HTML中的文本。

如果您需要解析指定的文本，请使用innerHTML方法。

var el = document.getElementById('my-element')
el.textContent = '×'

var el2 = document.getElementById('my-element2')
el2.innerHTML = '×'

<div id="my-element"></div>
<div id="my-element2"></div>

- Nope

---

我的代码中那两个问题只是打字错误，我已经更新了问题。尽管如此，这仍然回答了我的问题。我并没有真正将实体视为HTML内容。 - Scribblemacher

好的，我没有看到编辑。我会更新答案，忽略其他部分 :) - Nope

@Nope，感谢您分享详细的回复，它让我摆脱了困境。 - dimButTries

很棒的答案。让我避免了陷入htmlEncode和htmlDecode的兔子洞。 - WinEunuuchs2Unix

Answer 2

如其他人所述，你不能在textContent中使用HTML实体，
而且也没有必要这样做。
直接使用字符即可：

 el.textContent= "7 × 6 = 42";   // 7 × 6 = 42
 el.textContent= " ";

确保您的文件使用 <meta charset=UTF-8> 进行编码。这是现今的要求。

有些 HTML 实体直接处理起来可能比较麻烦，例如像   或   这样的空格。在这种情况下，可以使用十六进制 Unicode 转义序列。
例如: "NO-BREAK SPACE [NBSP]" 的代码点为 U+00A0。
在 JavaScript 字符串中只需写入 "\xa0" 或 "\u00a0" 即可。

// foo bar
el.textContent= "foo\xa0bar";
el.textContent= "foo\u00a0bar";

- j.j.

---

这个答案的第二部分，使用十六进制Unicode，是我（在Chrome中）连接现有节点文本和‍的唯一方法。换句话说，node.textContent = '/u200d' + node.TextContent。使用实体的InnerHTML和直接使用字符的文本内容都无法为此实体工作。 - mikeypie