HTMLElement：innerText 属性

innerText 是 HTMLElement 接口的一个属性，表示节点及其后代的渲染文本内容。

作为 getter，它近似于用户使用光标突出显示元素内容并将其复制到剪贴板时获得的文本。作为 setter，它将用给定值替换元素的子节点，并将任何换行符转换为 <br> 元素。

注意：innerText 容易与 Node.textContent 混淆，但两者之间存在重要区别。基本上，innerText 了解文本的渲染外观，而 textContent 则不了解。

值

表示元素渲染文本内容的字符串。

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

警告：在节点上设置 innerText 会删除节点的所有子节点，并用具有给定字符串值的单个文本节点替换它们。

示例

此示例比较了 innerText 与 Node.textContent。请注意，innerText 如何了解 <br> 等元素，并忽略隐藏元素。

HTML

html
<h3>Source element:</h3>
<p id="source">
  <style>
    #source {
      color: red;
    }
    #text {
      text-transform: uppercase;
    }
  </style>
  <span id="text">
    Take a look at<br />
    how this text<br />
    is interpreted below.
  </span>
  <span style="display:none">HIDDEN TEXT</span>
</p>
<h3>Result of textContent:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>…</textarea>

JavaScript

js
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;

结果

规范

规范
HTML 标准
# the-innertext-idl-attribute

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅