--- title: HTMLElement.innerText slug: Web/API/HTMLElement/innerText tags: - API - DOM - HTMLElement - Property - Reference - 参考 - 属性 translation_of: Web/API/HTMLElement/innerText original_slug: Web/API/Node/innerText ---
{{APIRef("DOM")}}

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 很容易与{{domxref("Node.textContent")}}混淆, 但这两个属性间实际上有很重要的区别. 大体来说, innerText 可操作已被渲染的内容， 而 textContent 则不会.

语法

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

输出值

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

例子

这个示例对比了 innerText 和 {{domxref("Node.textContent")}}. 这时 innerText 代表的含义就像 {{htmlElement("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;

结果

{{EmbedLiveSample("Example", 700, 450)}}

规范

规范 状态 备注
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}} {{Spec2('HTML WHATWG')}} Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.

浏览器兼容

{{Compat("api.HTMLElement.innerText")}}

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

参见