The innerText
property of the
HTMLElement
interface represents the "rendered" text content of a node
and its descendants. 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
is easily confused with
Node.textContent
, but there are important differences between the two.
Basically, innerText
is aware of the rendered appearance of text, while
textContent
is not.
Syntax
const renderedText = htmlElement.innerText
htmlElement.innerText = string
Value
A DOMString
representing the rendered text content of an element. If the
element itself is not being
rendered (e.g detached from the document or is hidden from view), the returned
value is the same as the Node.textContent
property.
Example
This example compares innerText
with Node.textContent
. Note
how innerText
is aware of things like <br>
elements, and
ignores hidden elements.
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
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");
textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'innerText' in that specification. |
Living Standard | Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history. |
Browser compatibility
BCD tables only load in the browser