innerHTML 和使用 createTextNode 填充跨度之间有什么主要区别吗？答案

【问题标题】：Is there any major difference between innerHTML and using createTextNode to fill a span?innerHTML 和使用 createTextNode 填充跨度之间有什么主要区别吗？
【发布时间】：2012-10-18 20:01:24
【问题描述】：

标题很清楚： innerHTML 和 createTextNode（与 Append 一起使用）用文本填充 span 之间有什么主要区别吗？

【问题讨论】：

什么？将文本附加到节点时，createTextNode() 比 innerHTML 快几个数量级。见jsperf.com/innerhtml-and-createtextnode
@devnull69 该测试专门用于多次附加新内容（计算 HTML 添加自然会更慢）。但简单地添加文本是非常平等的（innerHTML 实际上快一点）：jsperf.com/innerhtml-and-createtextnode/2
在我的机器上，您示例中的 createTextNode 仍然是 innerHTML（Win7 32 Enterprise，Firefox）的两倍
@devnull69 是的，实际上结果波动很大，我有时会稍微快一点，但有时反过来。无论如何，我的观点是，可能没有 OP 要求的“重大差异”。

标签： javascript innerhtml createtextnode

【解决方案1】：

当然。 createTextNode 将转义任何字符串并按原样显示它们，而innerHTML 可以将类似 html 的字符串呈现到 DOM 中。如果您不希望这样（除非您确定文本不包含未转义的标签，例如直接分配文字时），您可以使用textContent（或 IE 的innerText）。

但我推荐createTextNode，因为所有浏览器都支持它，没有任何怪癖。

【讨论】：

"...用文本填充跨度"
是的。但是 text 可能包含标签等（你永远不知道），所以我希望 OP 至少使用 innerText/textContent
@Bergi——您应该更新您的答案以包含 textContent/innerText 作为替代方案（甚至可能是首选）。
@Bergi textContent 和 innerText 不是跨浏览器，因此必须求助于 shim。我会改用innerHTML。
请注意，与innerContext 相反，innerText 知道 CSS 样式并将触发重排。 developer.mozilla.org/en-US/docs/Web/API/Node.textContent 不建议将它们互换。

【解决方案2】：

在网上做一些研究，这是我发现的。这应该在高层次上涵盖它：

elem.createTextNode(text) 和 elem.textContent = text 做同样的事情（来源：https://javascript.info/task/createtextnode-vs-innerhtml）
textContent 返回节点中包含的全文，而innerText 仅返回节点中包含的可见文本。（来源：Difference between textContent vs innerText）

【讨论】：

【解决方案3】：

我的理解是，对 innerHTML 的某些操作会删除所有绑定事件，因此最好使用 createTextNode。

【讨论】：