HTMLElement.innerText

innerText 属性表示一个节点及其后代的“渲染”文本内容。 As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.

Note: innerText 很容易与Node.textContent混淆, 但这两个属性间实际上有很重要的区别. 大体来说, innerText 可操作已被渲染的内容， 而 textContent 则不会.

语法

var renderedText = HTMLElement.innerText;
HTMLElement.innerText = string;

输出值

一段 DOMString 表示一个元素中已被渲染的内容. 如果元素自身没有 被渲染 (e.g 被从文档中删除或没有在视图中显示), 这时返回值与 Node.textContent 属性相同.

例子

这个示例对比了 innerText 和 Node.textContent. 这时 innerText 代表的含义就像 <br> 标签, 并且忽略了隐藏的元素.

HTML

<h3>Source element:</h3>
<p id="source">
  <style>#source { color: red; }</style>
Take a look at<br>how this text<br>is interpreted
       below.
  <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

const source = document.getElementById('source');
const textContentOutput = document.getElementById('textContentOutput');
const innerTextOutput = document.getElementById('innerTextOutput');

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

结果

规范

规范 状态 备注
HTML Living Standard
innerText		 Living Standard Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.

浏览器兼容

BCD tables only load in the browser

此特性最初由 Internet Explorer 引入。 被所有主要的浏览器供应商（vendor）采用后，它于 2016 年正式进入 HTML 标准。

参见