innerText，innerHtml，label，text，textContent

Question

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

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

• innerText

• innerHtml

• label

• text

• textContent

• outerText

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

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

我的发现是：

• innerText 将按原样显示该值，并忽略可能包含的任何HTML格式

• innerHTML 将显示值并应用任何HTML格式

• label似乎与相同innerText，所以看不到区别

• text似乎innerText与jQuery简写版本相同

• textContent看起来与相同，innerText但保持格式（例如\n）

• outerText 似乎与 innerText

我的研究只能采取我太厉害，我只能考什么我能想到的或读到的东西发布后，任何一个可以确认但如果我的研究是正确的，如果有什么特别的label和outerText？

Answer 1

下拉列表包含Option对象的集合，因此您应该使用.text属性检查元素的文本表示形式，即<option value="123">text goes here</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ^^^^^^^^^^^^^^顺便说一句，.text似乎.innerText与JQuery速记版本相同那是不对的。$(element).text()是jQuery版本，element.text而是属性访问版本。

Answer 2

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!