innerText vs innerHTML vs label vs text vs textContent vs outerText
我有一个由Javascript填充的下拉列表。
在决定加载时应该显示什么默认值时，我意识到以下属性显示了完全相同的值：
innerTextinnerHtmllabeltexttextContentouterText
我自己的研究显示了一些基准测试或它们之间的比较，但不是全部。
我可以使用自己的常识，选择一个或另一个，因为它们提供了相同的结果，但我担心，如果数据发生变化，这将不是一个好主意。
我的发现是：
innerText将按原样显示值，并忽略任何可能为includedinnerHTML的超文本标记语言格式。outerText将显示值并应用任何超文本标记语言formattinglabel显示为与innerText相同，因此我看不到versiontextContent显示为与jQuery相同，但innerText
速记version
textContent显示为与innerText相同，但保留格式(如\n) can显示为与innerText相同
我的研究只能带我走到这一步，因为我只能测试我能想到的东西或阅读发表的东西，尽管我的研究是否正确，以及label和outerText是否有什么特殊之处，但是否有人能证实我的研究是正确的
回答 6
Stack Overflow用户
发布于 2014-06-26 18:27:03
来自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的描述。我认为这可能是一个模糊的遗留属性，应该避免。
Stack Overflow用户
发布于 2016-09-01 12:22:12
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!Stack Overflow用户
发布于 2014-06-26 18:33:14
下拉列表由Option对象的集合组成，因此您应该使用.text属性来检查元素的文本表示形式。
<option value="123">text goes here</option>
^^^^^^^^^^^^^^顺便说一句，
.text似乎与.innerText相同，但却是JQuery速记版本
这是不正确的；$(element).text()是jQuery版本，而element.text是属性访问版本。
https://stackoverflow.com/questions/24427621
复制相似问题