JavaScript Text splitText() Method

What You’ll Learn

Text.splitText() is an instance method that breaks one text node into two sibling Text nodes at a given offset. Learn the return value, how to insert an element between the halves, how normalize() joins them again, and common errors—with five examples and try-it labs.

Introduction

Sometimes you need a “cut” in the middle of a text node—so you can wrap part of the text, highlight a word, or insert a node between two halves. You cannot put an element inside a Text node. Instead, you split the text, then insert between the two resulting siblings.

const text = new Text("foobar");
const second = text.splitText(3);
console.log(text.data);   // "foo"
console.log(second.data); // "bar"

Understanding the Method

MDN: splitText() breaks the Text node into two nodes at the specified offset, keeping both nodes in the tree as siblings. After the split:

• Original node — keeps content up to the offset.
• New node — holds the remaining text; this is the return value.
• Parent — if present, the new node is inserted as the next sibling.
• Offset === length — the new node has empty data.

📝 Syntax

const after = textNode.splitText(offset);

Parameters

Return value

The newly created Text node that contains the text after the offset.

Exceptions

• IndexSizeError — offset is negative or greater than the number of 16-bit units in the node’s text.
• NoModificationAllowedError — the node is read-only.

🔄 splitText() vs normalize()

After a split, wholeText on either sibling still reads the full adjacent run until you insert a non-Text node between them.

Examples Gallery

Examples follow MDN Text.splitText() and everyday insert-between patterns.

const text = new Text("foobar");
const bar = text.splitText(3);

console.log(text.data);  // "foo"
console.log(bar.data);   // "bar"
console.log(bar instanceof Text);

foo
bar
true

const p = document.createElement("p");
const foobar = new Text("foobar");
p.appendChild(foobar);

const bar = foobar.splitText(3);

console.log(p.childNodes.length);     // 2
console.log(p.firstChild.data);       // "foo"
console.log(p.lastChild.data);        // "bar"
console.log(p.lastChild === bar);     // true
console.log(foobar.nextSibling === bar);

2
foo
bar
true
true

const p = document.createElement("p");
p.appendChild(new Text("foobar"));

const foobar = p.firstChild;
const bar = foobar.splitText(3);

const u = document.createElement("u");
u.appendChild(new Text(" new content "));
p.insertBefore(u, bar);

console.log(p.innerHTML);
// foo<u> new content </u>bar

foo<u> new content </u>bar

const p = document.createElement("p");
const text = new Text("Hi");
p.appendChild(text);

const empty = text.splitText(text.length);

console.log(text.data);                 // "Hi"
console.log(JSON.stringify(empty.data)); // ""
console.log(p.childNodes.length);       // 2
console.log(empty.length);              // 0

Hi
""
2
0

const div = document.createElement("div");
const text = new Text("CodeToFun");
div.appendChild(text);

text.splitText(4);
console.log(div.childNodes.length); // 2
console.log(div.firstChild.wholeText); // "CodeToFun"

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

2
CodeToFun
1
CodeToFun

🚀 Common Use Cases

• Inserting a mark, link, or underline in the middle of a text node.
• Building rich-text style edits without replacing the whole parent via innerHTML.
• Teaching how Text siblings relate to wholeText and normalize().
• Unit tests that assert DOM structure after a cut.
• Preparing two anchors so insertBefore has a clear reference node.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Offset is counted in UTF-16 code units (same idea as string indices for many BMP characters).
• Opposite cleanup: normalize().
• Related: wholeText, Text(), insertBefore(), JavaScript hub.

💡 Best Practices