JavaScript textContent

Summary: in this tutorial, you will learn how to use the JavaScript textContent property to get the text content of a node and its descendants.

Reading textContent from a node #

To get the text content of a node and its descendants, you use the textContent property:

let text = node.textContent;Copy

Suppose that you have the following HTML snippet:

<div id="note">
    JavaScript textContent Demo!
    <span style="display:none">Hidden Text!</span>
    <!-- my comment -->
</div>Copy

The following example uses the textContent property to get the text of the <div> element:

let note = document.getElementById('note');
console.log(note.textContent);Copy

How it works.

• First, select the div element with the id note by using the getElementById() method.
• Then, display the text of the node by accessing the textContent property.

Output:

JavaScript textContent Demo!
Hidden Text!Copy

As you can see clearly from the output, the textContent property returns the concatenation of the textContent of every child node, excluding comments (and also processing instructions).

textContent vs. innerText #

On the other hand, the innerText takes the CSS style into account and returns only human-readable text. For example:

let note = document.getElementById('note');
console.log(note.innerText);Copy

Output:

JavaScript textContent Demo!Copy

As you can see, the hidden text and comments are not returned.

Since the innerText property uses the up-to-date CSS to compute the text, accessing it will trigger a reflow, which is computationally expensive.

A reflow occurs when a web browser needs to process and draw parts or all of a webpage again.

Setting textContent for a node #

Besides reading textContent, you can also use the textContent property to set the text for a node:

node.textContent = newText;Copy

When you set textContent on a node, all the node’s children will be removed and replaced by a single text node with the newText value. For example:

let note = document.getElementById('note');
note.textContent = 'This is a note';Copy

Summary #

• Use the textContent property to return the concatenation of the textContent of every child node. You can use it to set a text for a node.
• The innerText returns the human-readable text that takes CSS into account.

Quiz #