JavaScript Text wholeText Property

What You’ll Learn

Text.wholeText is a read-only instance property that returns the concatenated string of this text node and every logically adjacent Text node, in document order. Learn how it differs from data, how it relates to normalize(), and when an element sibling breaks the run—with five examples and try-it labs.

Introduction

A parent can hold several Text children in a row—for example after you remove a middle <strong> and two leftover text nodes sit next to each other. Each node still has its own data, but the visible sentence is really one run of characters.

wholeText lets you pick any text node in that run and read the full concatenated string without calling normalize() first.

console.log(textNode.wholeText); // all adjacent text as one string

Understanding the Property

MDN: the read-only wholeText property of the Text interface returns the full text of all Text nodes logically adjacent to the node. The text is concatenated in document order.

• Instance — read on one specific text node.
• Read-only — you cannot assign to wholeText.
• Adjacent — neighboring Text siblings (no element between them).
• Includes self — this node’s text is part of the result.

📝 Syntax

const all = textNode.wholeText;

Value

A string with the concatenated text of the adjacent Text run.

🔄 What Counts as “Adjacent”?

Examples Gallery

Examples follow MDN Text.wholeText and everyday adjacent-text patterns.

const text = new Text("CodeToFun");
console.log(text.data);
console.log(text.wholeText);
console.log(text.data === text.wholeText);

CodeToFun
CodeToFun
true

const p = document.createElement("p");
const a = new Text("Hello ");
const b = new Text("World");
p.appendChild(a);
p.appendChild(b);

console.log(p.childNodes.length); // 2
console.log(a.data);              // "Hello "
console.log(a.wholeText);         // "Hello World"
console.log(b.wholeText);         // "Hello World"

2
Hello 
Hello World
Hello World

const p = document.createElement("p");
p.appendChild(new Text("Through-hiking is great! "));
const strong = document.createElement("strong");
strong.textContent = "No filler!";
p.appendChild(strong);
p.appendChild(new Text(" However, keep hiking."));

p.removeChild(p.childNodes[1]); // remove 

console.log(p.childNodes.length); // 2 text nodes
console.log("'" + p.childNodes[0].wholeText + "'");

2
'Through-hiking is great!  However, keep hiking.'

const p = document.createElement("p");
const left = new Text("Before ");
const mid = document.createElement("em");
mid.textContent = "middle";
const right = new Text(" after");
p.append(left, mid, right);

console.log(left.wholeText);  // "Before "
console.log(right.wholeText); // " after"
console.log(p.textContent);   // "Before middle after"

Before 
 after
Before middle after

const div = document.createElement("div");
div.appendChild(new Text("Part 1 "));
div.appendChild(new Text("Part 2"));

const first = div.firstChild;
console.log(div.childNodes.length);     // 2
console.log(first.wholeText);           // "Part 1 Part 2"

div.normalize();
console.log(div.childNodes.length);     // 1
console.log(div.firstChild.data);       // "Part 1 Part 2"

2
Part 1 Part 2
1
Part 1 Part 2

🚀 Common Use Cases

• Reading leftover adjacent text after removing a middle element.
• Inspecting text runs without calling normalize().
• Debugging why childNodes lists more than one #text.
• Comparing per-node data with the visible adjacent string.
• Teaching the difference between sibling Text runs and full textContent.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Read-only — do not assign to wholeText.
• Does not cross element boundaries in the sibling list.
• Related: assignedSlot, Text(), normalize(), textContent, JavaScript hub.

💡 Best Practices