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会更简单，并且可能会有更好的效果。

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

Answer 2

如果你的元素只是包含文本而没有任何HTML格式，你可以分配给.textContent而不必担心字符串可能包含看起来像HTML的字符。例如，假设您有一个输入字段，并且用户在其中输入内容，然后将其放入DIV中。用户不应该能够在输入字段中输入HTML，因此您希望从字面上复制它。所以你写道：

div.textContent = input.value;

如果您想使用.innerHTML执行此操作，则必须编写如下内容：

div.textContent = input.value.replace(/</g, '&lt;').replace(/&/g, '&amp;');

防止HTML被解释。

从元素中读取时，如果您只想获取其纯文本，则可以使用.textContent，并忽略任何格式。例如。如果你有

<div id="x">This is <strong>important</strong> stuff</div>

您只需使用document.getElementById("x").textContent获取"This is important stuff"，而无需自行删除<strong>代码。

顺便说一句，不要使用innerText，它是非标准的，在FireFox中不受支持。

Answer 3

可悲的是，textContent在IE 11中不起作用。到目前为止，innerHTML几乎是唯一一款适用于所有浏览器的内容（我在15个以上版本的Firefox上测试过我的网站，有几个版本的IE（使用虚拟化的Windows）和20多个其他浏览器（包括其他人没有听说过的浏览器）。它适用于我尝试的每个平台：Windows，Linux，OS X，Android，iOS。

我了解潜在的安全问题。这就是总是在发布表单之前验证输入的原因（如果它们被传递到另一个页面进行处理，则再次检查它们）。

当innerHTML更好地完成工作时，textContent / innerText的用途是什么？

3 个答案: