JavaScript Node textContent Property

What Is textContent?

node.textContent is the plain text of a node and its descendants (MDN). You can read it or assign a new string.

el.textContent          → "plain text from subtree"
el.textContent = "Hi"   → children wiped; one text node left

Prefer for plain text (safer than innerHTML)
vs innerText: no layout / hidden text still included
Document / DocumentType → null

How to Use textContent

Read the string, or assign to replace the node’s children with text.

1. Select an element (or other node).
2. Read el.textContent for concatenated descendant text.
3. Assign a string to set plain text (children are replaced).
4. Use document.documentElement.textContent for whole-page text — not document.textContent.

Pseudocode

// get
if node is Document or DocumentType:
    return null
if node is Text / Comment / CDATA / PI:
    return nodeValue
else:
    return join(textContent of children)
         (skip comments & processing instructions)

// set
remove all children
append one Text node with the string

Cheat Sheet

Keep these text facts handy.

Live Preview

Read nested text, then assign a new string and watch children get replaced.

Click Read or Set…

JavaScript Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

const el = document.getElementById("divA");
// <div id="divA">This is <span>some</span> text!</div>

console.log(el.textContent);
// "This is some text!"

This is some text!

const el = document.getElementById("divA");
el.textContent = "This text is different!";

console.log(el.childNodes.length); // 1
console.log(el.firstChild.nodeName); // "#text"
console.log(el.innerHTML); // This text is different!

1
#text
This text is different!

const el = document.getElementById("msg");
const user = "<img src=x onerror=alert(1)>";

el.textContent = user; // shows the characters as text
// el.innerHTML = user; // would parse HTML — avoid for untrusted data

console.log(el.textContent);
console.log(el.querySelector("img")); // null

<img src=x onerror=alert(1)>
null

Performance Notes

Prefer textContent when you do not need CSS-aware text or HTML parsing — it avoids reflow and the HTML parser.

Key Takeaways