innerText vs innerHtml vs label vs text vs textContent vs outerText
我有一个由Javascript填充的下拉列表。
当决定什么应该是默认值显示在负载，我意识到，以下属性显示完全相同的值：
innerText-
innerHtml -
label -
text -
textContent -
outerText
我自己的研究显示了基准testing或几个之间的比较，但不是全部。
我可以使用自己的常识，select1或者其他，因为它们提供了相同的结果，但是，我担心如果数据发生变化，这不会是一个好主意。
我的发现是：
-
innerText将按原样显示值，并忽略可能包含的任何HTML格式 -
innerHTML将显示值并应用任何HTML格式 -
label看起来像innerText，我看不出有什么不同 -
text看起来和innerText相同，但jQuery的简写版本 -
textContent看起来与innerText相同，但保持格式化（如\n） -
outerText看起来与innerText相同
我的研究只能使我能够testing我能想到的东西，或者阅读发表的内容，但是如果我的研究是正确的，并且label和outerText有什么特别的地方的话，我们的研究能够证实吗？
来自MDN ：
Internet Explorer引入了element.innerText。 其意图与textContent几乎相同，但有一些不同之处：
请注意，虽然textContent获取所有元素（包括
<script>和<style>元素）的内容，但大部分等效的IE特定属性innerText不包含。innerText也知道样式，不会返回隐藏元素的文本，而textContent会。
由于innerText知道CSS样式，它将触发回stream，而textContent不会。
所以innerText将不包含被CSS隐藏的文本，但是textContent将会被隐藏。
innerHTML将按照名称的指示返回HTML。 通常，为了在元素中检索或写入文本，人们使用innerHTML。 应该使用textContent。 由于文本不被parsing为HTML，因此可能会有更好的性能。 而且，这避免了XSS攻击向量。
有这么多不同的属性的一个主要原因是，不同的浏览器本来有不同的名称为这些属性，并没有完整的跨浏览器支持所有这些。 如果您使用的是jQuery，那么应该坚持.text()因为它旨在消除跨浏览器差异。
对于其他的一些： outerHTML与innerHTML基本相同，只是它包含了它所属元素的开始和结束标记。 我似乎无法find很多关于outerText描述。 我认为这可能是一个不起眼的遗产，应该避免。
下拉列表包含一个Option对象的集合，因此您应该使用.text属性来检查元素的文本表示forms，即
<option value="123">text goes here</option> ^^^^^^^^^^^^^^
顺便说一句，
.text似乎与.innerText相同，但JQuery的简写版本
这是不正确的; $(element).text()是jQuery版本，而element.text是属性访问版本。
JLRishe另外优秀答案的补充：
innerText和outerText都存在的原因是为了与innerHTML和outerHTML对称。 当您分配给该属性时，这变得很重要。
假设你有一个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!
如果您针对特定的浏览器，请参阅浏览器兼容性http://www.quirksmode.org/dom/html/ 。 因为他们似乎都有自己的做事方式。 这就是为什么如果你不想摆弄，最好使用JQuery .text（）（ http://api.jquery.com/text/ ）。
textContent不会格式化（\ n）
