javascript - 当 innerHTML 做得更好时，textContent/innerText 有什么用？

Question

这对你们大多数人来说可能是一个新手问题，但有人向我解释说 innerText 仅获取元素的文本并且不能使用任何 HTML 标记对其进行修改，而 innerHTML 做同样的工作并且 HTML 也可以用过的。那么，拥有所有这些有什么意义呢？

Answer 1

textContent 相对于 innerHTML 的优势:

• 它适用于所有节点，而不仅仅是元素。

  var node = document.createTextNode('hello');
  node.innerHTML; // undefined
  node.textContent; // 'hello'
  

• 它获取元素的文本内容，而无需手动去除 HTML 标签。

  var el = document.createElement('div');
  el.innerHTML = 'A<p>B<span>C</span>D</p>D';
  el.textContent; // "ABCDD" (HTML tags stripped successfully)
  

• 它将元素的内容设置为一堆纯文本，而无需对其进行 HTML 转义。

  var el = document.createElement('div');
  el.textContent = 'A<p>B<span>C</span>D</p>D';
  el.children.length; // 0 (plain text HTML-escaped successfully)
  

当然，当您在元素上使用它们时，innerHTML 会更强大。但是当你只关心文本内容而不关心 HTML 内容时，textContent 更简单并且可能有更好的性能。

所以我们同时拥有它们，并为每种情况选择最合适的。