JavaScript Node normalize() Method

Beginner

⏱️ 10 min read

📚 Updated: Jul 2026

🎯 5 Examples

🚀 5 Try-it labs

Instance method

JavaScript Node.normalize() method tutorial — merge adjacent text nodes and remove empty ones

Overview

What You’ll Learn

The Node.normalize() method cleans a node’s subtree so text is tidy: no empty #text nodes, and no adjacent text siblings. Learn the MDN before/after pattern, how it relates to textContent, and why MDN calls Text.splitText() its opposite.

Kind

Instance method

Params

None

Returns

undefined

Merges

Adjacent #text

Removes

Empty #text

Status

Baseline widely

Fundamentals

Introduction

On screen, "Hello" + " World" looks like one string. In the DOM, those can still be two separate text nodes sitting next to each other. Empty text nodes can also appear after edits.

normalize() walks the node and its descendants and fixes that: merge neighbors, drop empties. The visible text usually stays the same; the childNodes list becomes cleaner.

💡

Beginner tip

If you only care about the visible string, textContent or innerText is enough. Call normalize() when you care about the structure of text nodes themselves.

Concept

Understanding `normalize()`

MDN: puts the specified node and all of its sub-tree into a normalized form. In that form:

No empty text nodes remain in the subtree.
No adjacent text nodes remain—neighbors are merged into one.
In place — the method mutates the tree; it does not return a new node.
Recursive — nested elements’ text children are cleaned too.

Foundation

📝 Syntax

JavaScript

node.normalize();

Parameters

None.

Return value

None (undefined). The subtree is updated in place.

Compare

⚖️ `normalize()` vs `Text.splitText()`

	`normalize()`	`splitText()`
Direction	Merge / tidy text nodes	Split one text node into two
Scope	Node + entire subtree	One Text node
MDN	Normalization	Listed as the opposite
Typical use	Cleanup after edits	Insert markup mid-text

Cheat Sheet

⚡ Quick Reference

Goal	Code
Normalize a subtree	`parent.normalize()`
Count text siblings	`parent.childNodes.length` (before / after)
Create adjacent text	`appendChild(createTextNode(...))` twice
Read combined text	`parent.textContent`
Opposite API	`textNode.splitText(offset)`
MDN status	Baseline Widely available (since July 2015)

Snapshot

🔍 At a Glance

Four facts to remember about Node.normalize().

Returns

undefined

Mutates in place

Baseline

widely

Since July 2015

Merges

#text+#text

Adjacent siblings

Drops

empty #text

From the subtree

Hands-On

Examples Gallery

Examples follow MDN Node.normalize() ideas. Use View Output or Try It Yourself.

📚 Getting Started

Merge neighbors and drop empty text nodes.

Example 1 — Merge Adjacent Text Nodes (MDN Style)

Append two text nodes, list them, normalize, then list again.

JavaScript

const wrapper = document.createElement("div");
wrapper.appendChild(document.createTextNode("Part 1 "));
wrapper.appendChild(document.createTextNode("Part 2 "));

function listText(label) {
  let out = label + "\n";
  let node = wrapper.firstChild;
  while (node) {
    out += " " + node.nodeName + ": " + node.nodeValue + "\n";
    node = node.nextSibling;
  }
  return out;
}

console.log(listText("Before normalization:"));
wrapper.normalize();
console.log(listText("After normalization:"));

Try It Yourself

How It Works

Two adjacent #text siblings become one combined text node. The readable string is unchanged; the tree is simpler.

Example 2 — Remove Empty Text Nodes

Empty text nodes disappear after normalization.

JavaScript

const box = document.createElement("div");
box.appendChild(document.createTextNode("Hello"));
box.appendChild(document.createTextNode(""));
box.appendChild(document.createTextNode("!"));

console.log(box.childNodes.length); // 3
box.normalize();
console.log(box.childNodes.length); // 1
console.log(box.firstChild.nodeValue); // "Hello!"

Try It Yourself

How It Works

The empty middle node is removed, and the remaining adjacent text is merged into "Hello!".

📈 Counts, Nesting & splitText

Measure cleanup, recurse into children, undo a split.

Example 3 — Child Count Before and After

A quick way to see that normalize changed structure, not just text.

JavaScript

const el = document.createElement("p");
el.appendChild(document.createTextNode("A"));
el.appendChild(document.createTextNode("B"));
el.appendChild(document.createTextNode("C"));

console.log("before:", el.childNodes.length); // 3
console.log("text:", el.textContent);         // "ABC"
el.normalize();
console.log("after:", el.childNodes.length);  // 1
console.log("text:", el.textContent);         // "ABC"

Try It Yourself

How It Works

textContent looks the same both times. childNodes.length shows the structural cleanup.

Example 4 — Nested Subtree Is Cleaned Too

Calling normalize on a parent also tidies text inside descendants.

JavaScript

const outer = document.createElement("div");
const inner = document.createElement("span");
inner.appendChild(document.createTextNode("Hi"));
inner.appendChild(document.createTextNode(" there"));
outer.appendChild(inner);

console.log(inner.childNodes.length); // 2
outer.normalize();
console.log(inner.childNodes.length); // 1
console.log(inner.textContent);       // "Hi there"

Try It Yourself

How It Works

Normalization is recursive: you do not need to call it on every child element separately.

Example 5 — Undo `splitText()` with `normalize()`

MDN: splitText is the opposite—normalize can merge the pieces again.

JavaScript

const p = document.createElement("p");
const t = document.createTextNode("CodeToFun");
p.appendChild(t);

t.splitText(4); // "Code" | "ToFun"
console.log(p.childNodes.length); // 2
console.log(p.firstChild.nodeValue, p.lastChild.nodeValue);

p.normalize();
console.log(p.childNodes.length); // 1
console.log(p.firstChild.nodeValue); // "CodeToFun"

Try It Yourself

How It Works

After a split you have two adjacent text nodes. normalize() merges them back into the original string in one node.

Applications

🚀 Common Use Cases

Cleaning a container after many createTextNode / appendChild calls.
Preparing a subtree before walking childNodes or counting text siblings.
Undoing temporary splitText edits when you no longer need two pieces.
Making structural comparisons more predictable (fewer accidental text splits).
Teaching how the DOM can store the same string as one or many text nodes.

Under the Hood

🔧 How It Works

Start at the node

You call normalize() on a parent (or any node with a subtree).

Call

Walk the subtree

Descendants are included—nested elements get cleaned too.

Recurse

Merge and drop

Adjacent text nodes merge; empty text nodes are removed.

Tidy

Normalized form

Same readable text, cleaner node structure.

Important

📝 Notes

Baseline Widely available (MDN, since July 2015).
Not Deprecated, Experimental, or Non-standard — no status banner required.
Does not change element markup structure—only text-node hygiene in the subtree.
Related: removeChild(), textContent, appendChild(), cloneNode(), lookupPrefix(), JavaScript hub.

Compatibility

Universal Browser Support

Node.normalize() is Baseline Widely available across modern browsers (MDN: since July 2015). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Node.normalize()

Safe, long-standing DOM cleanup for text nodes in a subtree.

Universal Widely available

Google Chrome Full support · Desktop & Mobile

Full support

Mozilla Firefox Full support · Desktop & Mobile

Full support

Apple Safari Full support · macOS & iOS

Full support

Microsoft Edge Full support · Chromium

Full support

Opera Full support · Modern versions

Full support

Internet Explorer Long-standing support in legacy IE

Full support

normalize() Excellent

Bottom line: Merges adjacent text nodes and removes empty ones across the subtree.

Wrap Up

Conclusion

Node.normalize() tidies text in a subtree: merge adjacent #text nodes and remove empty ones. Use it when structure matters; use textContent when you only need the visible string. MDN’s opposite is Text.splitText().

Continue with removeChild(), appendChild(), or the JavaScript hub.

View Examples Gallery removeChild()

Pro Tips

💡 Best Practices

✅ Do

Normalize after bulk text-node edits
Compare childNodes.length before and after when learning
Call it on a common ancestor to clean a whole subtree
Prefer textContent when only the string matters
Remember splitText as the opposite operation

❌ Don’t

Expect a return value—it mutates in place
Assume normalize changes element tags or attributes
Confuse DOM Node with the Node.js runtime
Skip normalize if your logic depends on separate text siblings
Forget empty text nodes also get removed

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about `normalize()`

Tidy text nodes without changing the readable string.

Core concepts

🔄 01

Merges #text

neighbors

API

🗑️ 02

Drops empty

text nodes

Cleanup

🌳 03

Whole subtree

recursive

Scope

⇄ 04

Opposite of

splitText

MDN

📄 05

In place

no return

Mutate

❓ Frequently Asked Questions

What does Node.normalize() do?

It puts the node and its entire subtree into a normalized form: no empty text nodes, and no adjacent text nodes (adjacent ones are merged).

Is normalize deprecated or experimental?

No. MDN marks Node.normalize() as Baseline Widely available (since July 2015). It is a standard DOM method — not Deprecated, Experimental, or Non-standard.

Does normalize take arguments or return a value?

No. The method has no parameters and returns undefined (None on MDN). It mutates the subtree in place.

How is it related to Text.splitText()?

MDN lists Text.splitText() as its opposite. splitText breaks one text node into two; normalize merges adjacent text nodes back together (and drops empty ones).

Why would text nodes become adjacent?

Common causes include repeated appendChild(createTextNode(...)), insertBefore of text, or splitText. The visible string may look fine while childNodes still lists separate #text siblings.

When should I call normalize?

Before walking childNodes/text node lists, after heavy DOM text edits, or when you need a tidy tree for serialization or equality checks that care about node structure.

Did you know?

MDN’s classic demo prints each child’s nodeName and nodeValue before and after. Watching two #text lines collapse into one is the clearest way to see that normalize changes structure, not the sentence the user reads.

Next: removeChild()

Learn how to detach a child node and reuse the return value.

removeChild() →

About the author

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)

5 people found this page helpful

JavaScript Node lookupPrefix() Method JavaScript Node removeChild() Method

JavaScript Node normalize() Method

What You’ll Learn

Kind

Params

Returns

Merges

Removes

Status

Introduction

Understanding normalize()

📝 Syntax

Parameters

Return value

⚖️ normalize() vs Text.splitText()

⚡ Quick Reference

🔍 At a Glance

Examples Gallery

📚 Getting Started

Example 1 — Merge Adjacent Text Nodes (MDN Style)

How It Works

Example 2 — Remove Empty Text Nodes

How It Works

📈 Counts, Nesting & splitText

Example 3 — Child Count Before and After

How It Works

Example 4 — Nested Subtree Is Cleaned Too

How It Works

Example 5 — Undo splitText() with normalize()

How It Works

🚀 Common Use Cases

🔧 How It Works

Start at the node

Walk the subtree

Merge and drop

Normalized form

📝 Notes

Universal Browser Support

Node.normalize()

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about normalize()

Merges #text

Drops empty

Whole subtree

Opposite of

In place

❓ Frequently Asked Questions

🧩 Related JavaScript Topics

lookupPrefix()

removeChild()

textContent

JavaScript Hub

Next: removeChild()

About the author

Understanding `normalize()`

⚖️ `normalize()` vs `Text.splitText()`

Example 5 — Undo `splitText()` with `normalize()`

Five things to remember about `normalize()`