HTMLElement: outerText 属性

Baseline 已广泛支持

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2022 年 3 月起，它已在各浏览器中可用。

HTMLElement 接口的 outerText 属性返回的值与 HTMLElement.innerText 相同。作为 setter 使用时，它会用给定的文本替换整个当前节点（这与 innerText 不同，后者替换的是当前节点内部的内容）。

有关更多信息以及演示 getter 用法和示例，请参阅 HTMLElement.innerText。

值

一个表示元素及其后代的可渲染文本内容的字符串。

如果元素本身没有被渲染（例如，它已从文档中分离或对视图隐藏），则返回的值与 Node.textContent 属性相同。

作为 setter 使用时，它会用给定的文本替换当前节点，并将任何换行符转换为 <br> 元素。

此示例强调了 outerText 和 innerText 作为 setter 使用时的根本区别（作为 getter 使用时它们是相同的）。

注意： 此示例是 What is the difference between innerText and outerText?（Stack overflow）的修改版本，由 codingintrigue 提供，并根据 CC BY-SA 3.0 许可。

考虑一个包含以下 HTML 的页面

html

<div>
  <p>Original content</p>
</div>

outerText 会替换整个选定的元素，因此 JavaScript 语句 p.outerText = "Whole element replaced" 会替换整个选定的 p 元素。

html

<div>Whole element replaced</div>

相比之下，p.innerText = "Content inside element replaced" 会替换选定 p 元素内部的内容。

html

<div>
  <p>Content inside element replaced</p>
</div>

规范
HTML # dom-outertext

此页面最后修改于 2024 年 7 月 26 日，由 MDN 贡献者修改。