innerText 和outerText 有啥区别？

Posted 2023-02-21

【中文标题】innerText 和outerText 有啥区别？

【英文标题】：What is the difference between innerText and outerText?innerText 和outerText 有什么区别？

【发布时间】：2013-08-31 03:24:16

【问题描述】：

通过网络搜索后，我明白了 innerhtml 和 outerHTML 之间的区别。

但是我很难理解innerText 和outerText 之间的区别。 两者在我看来几乎相同。

谁能用一个漂亮的插图帮助我理解这一点？

谢谢！

【问题讨论】：

第一个谷歌结果很好地描述了它：outerText：使您能够更改所有元素的文本，包括开始和结束标签。

【参考方案1】：

innerText 仅更改 HTML 标记中的文本，例如

<div>
  <p>Change Me</p>
</div>

p.innerText = "Changed!"

变成

<div>
  <p>Changed!</p>
</div>

而outerText：

<div>
  <p>Change Me</p>
</div>

p.outerText = "Changed!"

变成

<div>
   Changed!
</div>

【讨论】：

优秀的答案，简短而甜蜜。

【参考方案2】：

基本上，innerText：元素的标签之间是什么。outerText：元素的内容，包括标签。

【讨论】：

附注：developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerTextThis feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.