Question

我使用普通的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快得多，那捕获的是什么？它没有得到广泛支持吗？还有其他问题吗？

Answer 1

Differences between textContent/innerText/innerHTML on MDN.

And a Stackoverflow answer about innerText/nodeValue.

<强>摘要

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

innerText，但现在所有主流浏览器都支持。

Answer 2

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

快速举例：

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

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

输出：＆lt; a href =＆＃34; http：//google.com"＆gt; google＆lt; / a＆gt;

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

输出：google

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

MDN innerHTML，MDN textContent，MDN nodeValue

Answer 3

我熟悉和使用的两个是innerHTML和 textContent 。

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

＆＃13;

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)

＆＃13;

em { font-style: italic; }

＆＃13;

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

＆＃13;

所以， textContent 只是更改了文本，但它并没有解析HTML，因为我们可以从结果中的纯文本中看到的标签中看出来。

如果我们要解析HTML，我们会像这样使用 innerHTML ：

＆＃13;

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)

＆＃13;

em { font-style: italic; }

＆＃13;

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

＆＃13;

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

这很棒，而且是一个很大的安全漏洞：）

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

Answer 4

innerText 大致是您选择文本并将其复制后的内容。内部文本中不存在未呈现的元素。

textContent 是子树中所有 TextNodes值的串联。是否渲染。

这是一个详细说明差异的great post

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

Answer 5

[注意：这篇文章更多是关于共享可能对某人有用的特定数据，而不是告诉别人该怎么做]

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

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

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

Answer 6

将

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代码。

=>我们不应该使用它。

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

错误的操作：仅插入每个文本有时会删除插入的元素的所有其他HTML代码。
出于安全性考虑：当然，即使使用标记仍然没有问题，上述两个示例也是完全没有害处的，因为HTML5标准阻止了标记内命令行的执行。通过innerHTML属性插入网页时。请参阅此规则here。

由于这个原因，不建议在插入纯文本时使用innerHTML，而应使用textContent。 textContent属性将无法理解您传递的代码是HTML语法，而只是100％的文本而已。

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

My Header My Text

nodeValue vs innerHTML和textContent。怎么选择？

6 个答案: