innerText vs innerHTML vs label vs text vs textContent vs outerText

Question

我有一个由 Javascript 填充的下拉列表。

在决定加载时显示的默认值时，我意识到以下属性显示的值完全相同：

• innerText
• innerHTML
• label
• text
• textContent
• outerText

我自己的研究显示了基准测试或其中一些（但不是全部）之间的比较。

我可以根据自己的常识选择 1 或另一个，因为它们提供相同的结果，但是，我担心如果数据发生变化，这不是一个好主意。

我的发现是：

• innerText 将按原样显示值并忽略可能包含的任何 HTML 格式
• innerHTML 将显示值并应用任何 HTML 格式
• label 似乎与 innerText 相同，所以我看不出区别
• text 似乎与 innerText 相同，但jQuery 速记版本
• textContent 看起来与 innerText 相同，但保留格式（例如 \n ）
• outerText 似乎与 innerText 相同

我的研究只能带我走这么远，因为我只能测试我能想到的或阅读已发表的内容，但任何人都可以确认我的研究是否正确以及关于 label 和 outerText ？

原文由 MyDaftQuestions 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来自 MDN ：

Internet Explorer 引入了 element.innerText。意图与 [作为 textContent] 几乎相同，但有一些不同之处：

• 请注意，虽然 textContent 获取所有元素的内容，包括 <script> 和 <style> 元素，但大多数等效的 IE 特定属性 innerText 却没有。

• innerText 也知道样式并且不会返回隐藏元素的文本，而 textContent 会。

• 由于 innerText 知道 CSS 样式，它会触发重排，而 textContent 不会。

所以 innerText 不会包含被 CSS 隐藏的文本，但是 textContent 会。

innerHTML 如其名称所示返回 HTML。通常，为了在元素中检索或写入文本，人们使用 innerHTML。应该改用 textContent。由于文本未被解析为 HTML，因此它可能具有更好的性能。此外，这避免了 XSS 攻击向量。

万一你错过了，让我更清楚地重复一遍： 不要 使用 .innerHTML 除非你特别打算在元素中插入 HTML 并采取必要的预防措施以确保你插入的 HTML 不包含恶意内容。如果您只想插入文本，请使用 .textContent 或者如果您需要支持IE8及更早版本，请使用功能检测在 .textContent 和 .innerText 之间切换

有这么多不同属性的一个主要原因是不同的浏览器最初对这些属性有不同的名称，并且仍然没有对所有这些属性的完整的跨浏览器支持。如果您使用的是 jQuery，您应该坚持使用 .text() 因为它旨在消除跨浏览器的差异。*

对于其他一些： outerHTML innerHTML 相同，除了它包含它所属元素的开始和结束标记。我似乎根本找不到 outerText 的太多描述。我认为这可能是一个晦涩的遗留财产，应该避免。

原文由 JLRishe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

JLRishe 的其他出色答案的附录：

innerText 和 outerText 都存在的原因是为了与 innerHTML 和 outerHTML 对称。当您 分配 给属性时，这变得很重要。

假设您有一个元素 e 带有 HTML 代码 <b>Lorem Ipsum</b> ：

 e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

原文由 Anonymous 发布，翻译遵循 CC BY-SA 3.0 许可协议