JavaScript element.innerText Property

February 8, 2021 10:45 am IST

You are Here:

JavaScript element.innerText Property

The element.innerText property gets or sets the text content of the specified node, and all its descendants.

Note: If you set the innerText property to a specified element, all child nodes of that specified element are removed and replaced by a single Text node containing the specified string.

Note: The element.innerText is easily confused with node.textContent, but there are important differences between the two.

innerText will not return the text of elements that are hidden with CSS, but textContent will do.
textContent returns the text content of all elements, whereas, innerText returns the content of all elements, except for <style> and <script> elements.

Get the innerText

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p><a href="/jquery">Learn jQuery</a></p> <button onclick="myFunction()">Click Me</button> <p id="point"></p> <script> var x = document.getElementById("point"); var elem = document.getElementsByTagName("p")[0]; function myFunction(){ x.innerText = elem.innerText; } </script> </body> </html>

Run

Syntax

element.innerText

Return Values

Value	Explanation
String	Returns a DOMString representing the rendered text content of an element.

Set the innerText

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p><a href="/jquery">Learn jQuery</a></p> <button onclick="myFunction()">Click Me</button> <script> var elem = document.getElementsByTagName("a")[0]; function myFunction(){ elem.innerText = "Master jQuery"; } </script> </body> </html>

Run