HTMLElement: innerText property
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.
* Some parts of this feature may have varying levels of support.
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.
As a setter this will replace the element's children with the given value, converting any line breaks into
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.
Value
A string representing the rendered text content of an element.
If the element itself is not being rendered (for example, is detached from the document or is hidden from view), the returned value is the same as the Node.textContent property.
Warning:
Setting innerText on a node removes all of the node's children
and replaces them with a single text node with the given string value.
Examples
This example compares innerText with Node.textContent.
Note how innerText is aware of things like
HTML
Source element:
Take a look at
how this text
is interpreted below.
Result of textContent:
Result of innerText:
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 |
|---|
| HTML # the-innertext-idl-attribute |