MDN 上 textContent/innerText/innerHTML 之间的差异。

以及关于innerText/nodeValue 的Stackoverflow 答案。

概括

1. innerHTML将内容解析为 HTML，因此需要更长的时间。
2. nodeValue使用纯文本，不解析 HTML，速度更快。
3. textContent使用直接文本，不解析 HTML，并且速度更快。
4. innerText考虑样式。例如，它不会获得隐藏文本。

innerText根据caniuse，在 FireFox 45 之前，firefox 中不存在，但现在所有主要浏览器都支持。

.textContent输出text/plain而.innerHTML输出text/html。

快速示例：

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

输出：<a href="http://google.com">google</a>

example.innerHTML = '<a href="https://google.com">google</a>';

输出：谷歌

您可以从第一个示例中看到 type 的输出text/plain未被浏览器解析并导致显示完整内容。该类型的输出text/html告诉浏览器在显示之前解析它。

MDN innerHTML , MDN textContent , MDN nodeValue

我熟悉并与之合作的两个是 innerHTML 和textContent。

当我只想像这样更改段落或标题的文本时，我使用textContent：

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

因此，textContent只是更改文本，但它不会解析 HTML，正如我们可以从结果中纯文本中可见的标签看出的那样。

如果我们想解析 HTML，我们可以像这样使用innerHTML：

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

因此，第二个示例将我分配给 DOM 元素的innerHTML属性的字符串解析为 HTML。

这太棒了，而且是一个很大的安全漏洞:)

（如果您想了解安全性，请查找 XSS）

如果您选择文本并复制它，则innerText大致是您将获得的内容。未呈现的元素不存在于innerText 中。

textContent是子树中所有TextNode的值的串联。无论是否渲染。

这是一篇很好的帖子，详细说明了差异

innerHTML不应与innerText 或textContent 进行比较，因为它们完全不同，您应该真正知道原因:-) 单独查找

[注意：这篇文章更多的是关于分享可能对某人有帮助的特定数据，而不是告诉人们该做什么]

如果有人想知道今天最快的是什么：https : //jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent (对于第二个测试，span 的内容是纯文本，结果可能会根据其内容而变化）

看来那.innerHtml是纯粹速度方面的大赢家！

（注意：我在这里只谈论速度，在选择使用哪个标准之前，您可能需要寻找其他标准！）