JavaScript Node normalize() Method

Beginner
5 min read
Updated: Oct 2026
5 examples
Live preview
Baseline
JavaScript Node.normalize method — merge adjacent text nodes remove empty text
Definition

What Is normalize()?

Node.normalize() puts the node and its entire subtree into a normalized form: no empty text nodes, and no adjacent text nodes (they are merged) (MDN).

Baseline · Widely available: not Deprecated, Experimental, or Non-standard (since about July 2015).

Opposite of Text.splitText(): split breaks one text node into two; normalize merges adjacent text back together and drops empty ones (MDN).

Remember
node.normalize()

before:  [#text "Part 1 "] [#text "Part 2 "]
after:   [#text "Part 1 Part 2 "]

also removes empty #text nodes
mutates in place · returns undefined
UsePrefer
Merge adjacent textparent.normalize()
Split one text nodetext.splitText(offset)
Read joined text onlytextContent (no structural merge)
Approach

How to Use normalize()

Call it on a parent (or any ancestor) after text edits that may leave empty or adjacent #text nodes.

  1. Build or edit the subtree (append text nodes, splitText, etc.).
  2. Call node.normalize() on the container (or a higher ancestor).
  3. Walk childNodes — adjacent text siblings are gone.
  4. Remember: no return value; the tree is updated in place.
PieceRequired?Role
Receiver nodeYesRoot of the subtree to clean
ParametersNone—
Return value—undefined (mutates in place)

Pseudocode

Pseudocode
for each descendant under node (depth-first):
  remove empty text nodes
  if two #text siblings are next to each other:
    merge into one text node

result: tidy subtree, same visible text
Reference

Cheat Sheet

Keep these facts handy when cleaning up DOM text structure.

TopicDetail
Syntaxnode.normalize()
ScopeNode + entire subtree
MergesAdjacent #text siblings
RemovesEmpty text nodes
Returnsundefined
OppositeText.splitText()
Elements / commentsNot merged (only text adjacency)
Status (MDN)Baseline Widely available
Try it

Live Preview

Build adjacent text nodes, empty text, or a nested case — then call normalize() and list the children (MDN-style).

Browser demo of Node.normalize() — merge adjacent text, drop empty text.

Result
Loading…
Code

JavaScript Examples

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

Example 1 — Merge Adjacent Text (MDN)

Two text siblings become one after normalize().

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

console.log("before: " + wrapper.childNodes.length);
wrapper.normalize();
console.log("after: " + wrapper.childNodes.length);
console.log(wrapper.firstChild.nodeValue);
Try It Yourself

How It Works

  1. Append two text nodes. Adjacent #text siblings.
  2. Length is 2. Structure is fragmented.
  3. Call normalize(). Merges into one text node.
  4. Visible string unchanged. Only the node count changes.

Example 2 — Remove Empty Text

Empty text nodes are dropped from the subtree.

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

console.log("before: " + box.childNodes.length);
box.normalize();
console.log("after: " + box.childNodes.length);
console.log(box.textContent);
Try It Yourself

How It Works

  1. Insert an empty #text. Counts as a child.
  2. Neighbors are adjacent after removal. Then merge applies.
  3. One text node remains. "Hi!"
  4. textContent looks the same. Structure is cleaner.

Example 3 — Nested Subtree

normalize() cleans the whole subtree, not only direct children.

JavaScript
const outer = document.createElement("div");
const inner = document.createElement("span");
inner.appendChild(document.createTextNode("A"));
inner.appendChild(document.createTextNode("B"));
outer.appendChild(inner);

console.log("inner before: " + inner.childNodes.length);
outer.normalize();
console.log("inner after: " + inner.childNodes.length);
console.log(inner.firstChild.nodeValue);
Try It Yourself

How It Works

  1. Fragment lives under span. Not on outer directly.
  2. Call on the ancestor. Still walks the subtree.
  3. Inner text merges. Descendant adjacency is fixed.
  4. One call can tidy deep trees. No need to visit every parent.

Example 4 — Undo splitText

Normalize is the structural opposite of splitting a text node.

JavaScript
const p = document.createElement("p");
const t = document.createTextNode("HelloWorld");
p.appendChild(t);
t.splitText(5);

console.log("after split: " + p.childNodes.length);
p.normalize();
console.log("after normalize: " + p.childNodes.length);
console.log(p.firstChild.nodeValue);
Try It Yourself

How It Works

  1. splitText(5). Creates two adjacent text nodes.
  2. Length becomes 2. "Hello" + "World".
  3. normalize() merges them. Back to one node.
  4. MDN pairing. Split vs normalize are opposites for text structure.

Example 5 — List Children Before / After

Log each sibling like MDN’s before/after dump.

JavaScript
function listTextKids(parent) {
  const lines = [];
  let node = parent.firstChild;
  while (node) {
    lines.push(node.nodeName + ": " + JSON.stringify(node.nodeValue));
    node = node.nextSibling;
  }
  return lines.join("\n");
}

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

console.log("Before:\n" + listTextKids(wrapper));
wrapper.normalize();
console.log("After:\n" + listTextKids(wrapper));
Try It Yourself

How It Works

  1. Walk siblings. Same idea as MDN’s while-loop dump.
  2. Log before. Two separate #text entries.
  3. Normalize. One merged entry remains.
  4. Great for teaching. Makes the structural change obvious.

Edge Cases & Pitfalls

Check these before assuming normalize() changes visible text.

structure

Visible text usually stays the same

textContent often looks identical; only childNodes structure changes.

elements

Elements block merges

Text on either side of a <span> is not adjacent — normalize will not join across elements.

refs

Sibling text references may vanish

After a merge, an old variable pointing at a removed text node is no longer in the tree.

when

Call after edits, not constantly

Useful after batch text DOM work — not something to run every keystroke without need.

Compatibility

Browser Support

Node.normalize() is Baseline Widely available (MDN, since about July 2015). Safe for everyday DOM cleanup.

✓ Baseline · Widely available

Node.normalize()

Supported across Chrome, Firefox, Safari, Edge, Opera, and legacy IE. No options — mutates in place.

99% Browser support
Google Chrome normalize() · full support
Full support
Microsoft Edge normalize() · Chromium
Full support
Apple Safari normalize() · full support
Full support
Mozilla Firefox normalize() · full support
Full support
Opera normalize() · full support
Full support
Internet Explorer normalize() · legacy
Legacy support
Node.normalize() Excellent

Bottom line: Use when you need tidy text-node structure. Pair with splitText when you intentionally fragment text.

Analysis

Performance Notes

ApproachCostBest for
Normalize a small subtreeUsually cheapAfter batch text edits
Normalize huge documents oftenCan walk a large treePrefer a local parent
Only need the stringCheaperUse textContent — no merge needed

Call it on the smallest parent that needs cleaning — not on document by default.

Remember

Key Takeaways

  • Role: tidy text nodes in a subtree — merge adjacent, drop empty.
  • In place: no return value; structure changes under the node.
  • Opposite: Text.splitText() fragments; normalize joins.
  • Scope: whole subtree — call on a local parent when possible.

One line: normalize() cleans text-node clutter — merge neighbors, remove empties, keep the readable string.

Frequently Asked Questions

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) (MDN).
No. MDN marks it Baseline Widely available (since about July 2015). It is not Deprecated, Experimental, or Non-standard.
No. It has no parameters and returns undefined. It mutates the subtree in place.
MDN lists Text.splitText() as its opposite. splitText breaks one text node into two; normalize merges adjacent text nodes and drops empty ones.
Repeated appendChild(createTextNode(...)), insertBefore of text, or splitText. The visible string may look fine while childNodes still lists separate #text siblings.
Before walking childNodes carefully, after heavy text edits, or when you need a tidy tree for structure-sensitive checks.

Next: removeChild()

Learn how node.removeChild() removes a child from the DOM tree.

removeChild 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)

10 people found this page helpful

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