问innerText vs innerHTML vs label vs text vs textContent vs outerText

EN

来自MDN

Internet Explorer引入了element.innerText。其意图与textContent基本相同，但有几点不同：

• 请注意，虽然textContent获取所有元素的内容，包括<script>和<style>元素，但最等效的特定于IE的属性innerText则不能。

• innerText也能识别样式，不会返回隐藏元素的文本，而textContent会。

• 因为innerText知道CSS样式，所以它会触发回流，而textContent不会。

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

正如其名称所示，

innerHTML返回超文本标记语言。通常，为了在元素中检索或写入文本，人们使用innerHTML。应该改用textContent。因为文本不会被解析为HTML，所以它可能具有更好的性能。此外，这避免了XSS攻击向量。

如果您遗漏了这一点，让我更清楚地重复一遍:除非您特别打算在元素中插入，并且已经采取了必要的预防措施以确保您要插入的不包含恶意内容，否则不要使用.innerHTML。如果只想插入文本，请使用.textContent，或者如果需要支持IE8和更早版本，请使用特征检测在.textContent和.innerText__之间切换。

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

对于其他一些元素：outerHTML基本上与innerHTML相同，只是它包含了它所属元素的开始和结束标记。我似乎找不到太多关于outerText的描述。我认为这可能是一个模糊的遗留属性，应该避免。

JLRishe的其他优秀答案的附录：

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

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

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!

下拉列表由Option对象的集合组成，因此您应该使用.text属性来检查元素的文本表示形式。

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

顺便说一句，

.text似乎与.innerText相同，但却是JQuery速记版本

这是不正确的；$(element).text()是jQuery版本，而element.text是属性访问版本。