Examples
Return the text content of an element:
let text = element.textContent;
Try it Yourself »
Change the textual content of a
element with id="demo":
element.textContent = "I have changed!";
Try it Yourself »
Get all the textual content of an
- element with id="myList":
let text = document.getElementById["myList"].textContent;
Try it Yourself »
Definition and Usage
The textContent property sets or returns the text content of the specified node, and all its descendants.
The Differences Between
innerHTML,
innerText and textContent
See below
Syntax
Return the text content of a node:
or
Set the text content of a node:
element.textContent = text
Property Value
| Property | Description |
| text | The text content of the element or node. |
Return Value
| Type | Description |
| String | The text content of the element and all its descendants. Returns null if the element is a document, a document type, or a notation.
|
The Differences Between
innerHTML, innerText and textContent
| The innerHTML property returns: The text content of the element, including all spacing and inner HTML tags. |
| The innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except and elements. |
| The textContent property returns: The text content of the element and all descendaces, with spacing and CSS hidden text, but without tags. |
HTML Example
This element has extra spacing and contains a span element.
JavaScript Examples
let text = document.getElementById["myP"].innerText;
let text = document.getElementById["myP"].innerHTML;
let text = document.getElementById["demo"].textContent;
Try it Yourself »
In the example above:
| The innerText property returns: This element has extra spacing and contains a span element. |
| The innerHTML property returns: This element has extra spacing and contains a span element. |
| The textContent property returns: This element has extra spacing and contains a span element. |
Browser Support
element.textContent is a DOM Level 3 [2004] feature.
It is fully supported in all browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |
Example
Get the inner text of an element:
let text = element.innerText;
Try it Yourself »
More examples below.
Definition and Usage
The innerText property sets or returns the text content of an element.
The Differences Between
innerHTML, innerText and textContent
See below
Syntax
Return the text content of an element or node:
or
Set the text content of an element or node:
or
Property Value
| Property | Description |
| text | The text content of the element. |
Return Value
| Type | Description |
| String | The text content of the element and all descendants, except for and elements. |
The Differences Between
innerHTML, innerText and textContent
| The innerHTML property returns: The text content of the element, including all spacing and inner HTML tags. |
| The innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except and elements. |
| The textContent property returns: The text content of the element and all descendaces, with spacing and CSS hidden text, but without tags. |
HTML Example
This element has extra spacing and contains a span element.
JavaScript Examples
let text = document.getElementById["myP"].innerText;
let text = document.getElementById["myP"].innerHTML;
let text = document.getElementById["demo"].textContent;
Try it Yourself »
In the example above:
| The innerText property returns: This element has extra spacing and contains a span element. |
| The innerHTML property returns: This element has extra spacing and contains a span element. |
| The textContent property returns: This element has extra spacing and contains a span element. |
Browser Support
element.innerText is supported in all browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 10-11 | Yes | Yes | Yes | Yes |