innerText，innerHtml，label，text，textContent

Question

我有一个由Javascript填充的下拉列表。在决定应该在加载时显示的默认值时，我意识到以下属性显示的值完全相同：innerTextinnerHtmllabeltexttextContentouterText我自己的研究显示基准测试或其中一些（但不是全部）之间的比较。我可以使用自己的常识选择一个或另一个，因为它们提供相同的结果，但是，我担心如果数据发生更改，这将不是一个好主意。我的发现是：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>

                    ^^^^^^^^^^^^^^

顺便说一句，

.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!