JavaScript Node textContent Property

What You’ll Learn

The Node.textContent property gets or sets the text of a node and its descendants. Learn how setting it replaces children, how it differs from innerText and innerHTML, and when it returns null.

Introduction

textContent is the go-to way to read or write plain text in the DOM. Reading concatenates all descendant text. Writing wipes the node’s children and puts one text node in their place.

It is often confused with innerText and innerHTML. Those APIs look similar but behave differently around styling, hidden content, and HTML parsing.

Understanding textContent

MDN: textContent represents the text content of the node and its descendants. The exact result depends on the node type.

• Element (and most other nodes) — concatenation of children’s text (comments excluded).
• Text / Comment / CDATA — same idea as nodeValue.
• Document / DocumentType — returns null.
• Setting — removes all children; inserts one text node.

📝 Syntax

const text = element.textContent; // string (often)

element.textContent = "New plain text";

Return value

A string, or null for Document / DocumentType nodes.

⚖️ textContent vs innerText vs innerHTML

Examples Gallery

Examples follow MDN Node.textContent patterns. Use View Output or Try It Yourself for each case.

// <div id="divA">This is <span>some</span> text!</div>

const text = document.getElementById("divA").textContent;
console.log(text); // "This is some text!"

This is some text!

const divA = document.getElementById("divA");
console.log(divA.children.length); // 1 (the span)

divA.textContent = "This text is different!";
console.log(divA.children.length); // 0
console.log(divA.textContent);     // "This text is different!"

1
0
This text is different!

const box = document.getElementById("box");
const untrusted = "<img src=x onerror=alert(1)>";

box.textContent = untrusted;
console.log(box.children.length); // 0 (no parsed element)
console.log(box.textContent);     // literal string with < and >

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

const wrap = document.getElementById("wrap");
console.log(wrap.textContent.trim());
// includes "hidden" even if display:none
console.log(wrap.innerText.trim());
// often omits the hidden span's text

visible hidden
visible

console.log(document.textContent); // null

const rootText = document.documentElement.textContent;
console.log(typeof rootText); // "string"

null
string

🚀 Common Use Cases

• UI labels — set button / heading / status text safely.
• Read without markup — scrape plain text from a container.
• Clear and replace — wipe nested structure with one assignment.
• Avoid XSS — prefer over innerHTML for untrusted strings.
• Pair with nodeValue — use nodeValue when you already hold a Text node.

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Setting textContent destroys nested elements—plan for that.
• Related: nodeValue, appendChild(), childNodes, JavaScript hub.

💡 Best Practices