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⁩.

TheinnerText property of theHTMLElement 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<br> elements.

Note:innerText is easily confused withNode.textContent, but there are important differences between the two.Basically,innerText is aware of the rendered appearance of text, whiletextContent is not.

Value

A string representing the rendered text content of an element.

If the element itself is notbeing rendered (for example, is detached from the document or is hidden from view), the returned value is the same as theNode.textContent property.

Warning:SettinginnerText on a node removesall of the node's children and replaces them with a single text node with the given string value.

Examples

This example comparesinnerText withNode.textContent.Note howinnerText is aware of things like<br> elements, and ignores hidden elements.

HTML

html

<h3>Source element:</h3><p>  <style>    #source {      color: red;    }    #text {      text-transform: uppercase;    }  </style>  <span>    Take a look at<br />    how this text<br />    is interpreted below.  </span>  <span>HIDDEN TEXT</span></p><h3>Result of textContent:</h3><textarea rows="18" cols="40" readonly>…</textarea><h3>Result of innerText:</h3><textarea rows="6" cols="40" 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;