当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更简单并且可能具有更好的性能.

所以我们有两个,并选择最适合每个案例.