JavaScript Text wholeText Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word WHOLETEXT

Definition

Text.wholeText is a read-only property that returns the full text of this node plus every logically adjacent Text node, concatenated in document order (MDN).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use text.wholeText. Start with this line.

JavaScript
textNode.wholeText
CallWhat it does
textNode.wholeTextPrimary signature.

Built into the browser. Read text.wholeText on a Text node — no import required.

Library declarations
JavaScript
textNode.wholeText

Parameters

ParameterDescription
Adjacent Text siblingsOptional. Joined into wholeText when present

Return Value

Return ValueDescription
*String (concatenated adjacent text)

JavaScript Examples

Example 1 — Two Adjacent Text Nodes

Either sibling’s wholeText joins both; data stays per node.

JavaScript
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"
Try It Yourself

How It Works

  1. Create two text nodes. Append "Hello " and "World" as siblings under <p>.
  2. Count children. childNodes.length is 2 — they are still separate nodes.
  3. Read data. a.data is only the first node: "Hello ".
  4. Read wholeText. From a or b, you get the full run: "Hello World".

Example 2 — An Element Breaks the Run

Text on each side of an element does not share one wholeText.

JavaScript
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"
Try It Yourself

How It Works

  1. Insert an element in the middle. <em> sits between two Text nodes.
  2. Adjacency stops. left.wholeText cannot cross the element → "Before ".
  3. Same on the right. right.wholeText is only " after".
  4. Need everything? Use p.textContent for all descendant text, including inside <em>.

Example 3 — wholeText vs normalize()

wholeText reads the merge; normalize() actually merges nodes.

JavaScript
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"
Try It Yourself

How It Works

  1. Start with two siblings. The parent still has two Text children.
  2. Read without merging. wholeText already returns "Part 1 Part 2".
  3. Call normalize(). Adjacent Text nodes collapse into one real node.
  4. After merge. childNodes.length is 1, and that node’s data holds the combined string. See normalize().
Compatibility

Browser Support

Text.wholeText is Baseline Widely available (MDN: across browsers since July 2015).

✓ Baseline · Widely available

Text.wholeText

Supported in modern Chromium, Firefox, Safari, Edge, and long-supported browsers. Safe for general web use.

97% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Text.wholeText Excellent

Bottom line: Use wholeText freely in modern and older evergreen browsers when you need adjacent Text siblings as one string without normalizing.

Frequently Asked Questions

A read-only string: the concatenated text of this Text node plus every Text node logically adjacent to it, in document order.
No. MDN marks Text.wholeText as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
data (and nodeValue) is only this one text node’s content. wholeText joins neighboring text siblings too, so it can be longer than data when adjacent Text nodes exist.
MDN: wholeText is similar to calling Node.normalize() and then reading the text, but without modifying the tree. normalize() merges adjacent text nodes; wholeText only reads the combined string.
An Element (or other non-Text) sibling between text nodes. Text inside a <strong> or <a> is not adjacent to text outside that element for wholeText purposes.
No. It is read-only. To change text, assign to data / nodeValue / textContent, or rebuild nodes.

Next: splitText()

Learn how to split one Text node into two at a character offset.

splitText() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

JavaScript Text assignedSlot Property JavaScript Text splitText() Method