144

我正在使用纯 js 来更改标签元素的内部文本，但我不确定我应该使用 innerHTML 或 nodeValue 或 textContent 的理由。我不需要创建新节点或更改 HTML 元素或任何东西——只需替换文本即可。下面是代码示例：

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

我查看了 jQuery 源代码，它只使用了一次 nodeValue，但使用了几次 innerHTML 和 textContent。然后我发现这个 jsperf 测试表明 firstChild.nodeValue 明显更快。至少我是这么理解的。

如果 firstChild.nodeValue 快得多，有什么问题？它没有得到广泛的支持吗？还有其他问题吗？

4

6 回答 6

171

MDN 上 textContent/innerText/innerHTML 的区别。

还有一个关于 innerText/nodeValue 的 Stackoverflow 答案。

概括

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

innerText根据caniuse的说法，直到 FireFox 45 才存在于 Firefox 中，但现在所有主要浏览器都支持。

于 2014-01-23T14:57:20.040 回答
61

.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>';

输出：谷歌

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

MDN innerHTML , MDN textContent , MDN nodeValue

于 2014-09-17T17:32:59.680 回答
9

我熟悉并与之合作的两个是 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）

于 2017-04-19T18:42:51.657 回答
4

如果选择文本并复制它，innerText大致就是你会得到的。innerText 中不存在未呈现的元素。

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

这是一个很棒的帖子，详细说明了差异

innerHTML不应该包含在与 innerText 或 textContent 的比较中，因为它完全不同，你应该知道为什么:-) 单独查找

于 2018-01-24T16:47:27.430 回答
2

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

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

.innerHtml就纯粹的速度而言，这似乎是最大的赢家！

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

于 2019-02-28T13:08:44.373 回答
1

Element.innerHTML 属性set，或get元素的 HTML 代码。

例如：我们有一个<h1>标签和强烈的风格：

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> 要get元素的内容具有 id 等于“myHeader”，我们将执行相同的操作：

var element = document.getElementById("myHeader");
element.innerHTML

返回结果：

<strong>My Header</strong> Normal Text`

要为此元素“设置”新内容（值），代码将在此处：

Element.innerHTML = "My Header My Text";

所以这个属性不仅适用于纯文本，而且它的目的是传递或复制 HTML 代码。

=> 我们不应该使用它。

但是，很多程序员（包括我自己）使用这个属性在网页中插入文本，这种方法存在潜在的风险：

  1. 错误操作：插入每个文本有时会删除插入元素的所有其他 HTML 代码。
  2. 为了安全：当然，上面的两个例子是完全无害的，即使使用标签仍然没有问题，因为 HTML5 标准已经阻止了标签内部命令行的执行。当通过 innerHTML 属性插入网页时。请在此处查看此规则。

由于这个原因，innerHTML插入纯文本时不建议使用，而是使用textContent. 该textContent属性不会理解您传递的代码是 HTML 语法，而只是 100% 的文本，不多也不少。

textContent如果在上面的示例中使用，则返回结果：

My Header My Text
于 2019-12-23T14:12:06.547 回答