innerText vs innerHTML vs label vs text vs textContent vs outerText

2022-08-30 02:41:02

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

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

  • innerText
  • innerHTML
  • label
  • text
  • textContent
  • outerText

我自己的研究表明,其中一些是基准测试或比较,但不是全部。

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

我的发现是:

  • innerText将按原样显示值,并忽略可能包含的任何HTML格式
  • innerHTML将显示值并应用任何 HTML 格式
  • label看起来和一样,所以我看不出区别innerText
  • text看起来与 jQuery 速记版本相同innerText
  • textContent看起来与相同,但保持格式(例如innerText\n)
  • outerText似乎与innerText

我的研究只能带我走得更远,因为我只能测试我能想到的东西或阅读发表的内容,任何人都可以确认我的研究是否正确,以及是否有任何特别之处?labelouterText


答案 1

来自 MDN

Internet Explorer 引入了 element.innerText。意图几乎相同[与textContent]有一些不同之处:

  • 请注意,虽然 textContent 获取所有元素(包括 和 元素)的内容,但大多数等效的特定于 IE 的属性 innerText 却没有。<script><style>

  • innerText也知道样式,不会返回隐藏元素的文本,而textContent会。

  • 由于innerText知道CSS样式,它将触发重排,而textContent则不会。

因此,将不包括由CSS隐藏的文本,但会。innerTexttextContent

innerHTML 返回 HTML,正如其名称所指示的那样。通常,为了在元素中检索或编写文本,人们使用innerHTML。应改用文本内容。由于文本未解析为 HTML,因此它可能具有更好的性能。此外,这避免了XSS攻击媒介。

如果您错过了这一点,让我更清楚地重复一遍:除非您特别打算在元素中插入HTML并采取必要的预防措施以确保您插入的HTML不能包含恶意内容,否则不要使用.innerHTML。如果只想插入文本,请使用 .textContent,或者如果需要支持 IE8 及更早版本,请使用功能检测在 .textContent.innerText 之间关闭。

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

对于其他一些:基本上与 相同,只是它包含它所属元素的开始和结束标签。我似乎根本找不到太多的描述。我认为这可能是一个模糊的遗留财产,应该避免。outerHTMLinnerHTMLouterText


答案 2

JLRishe其他优秀答案的附录:

innerText和outhereText都存在的原因是为了与innerHTML和outhereHTML对称。当您分配给属性时,这一点变得很重要。

假设你有一个带有HTML代码的元素:e<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!