JavaScript Text Constructor

What You’ll Learn

The Text() constructor builds a DOM text node. Learn optional string content, how it compares to document.createTextNode(), how to insert it with appendChild(), and how to read or update the text—with five examples and try-it labs.

Introduction

In the DOM, the letters you see inside an element are often stored in a Text node—not as a property of the element alone. When the browser parses <p>Hello</p>, it creates an element and a child text node whose data is "Hello".

new Text("Test") lets you build that kind of node yourself, then attach it with appendChild, insertBefore, or similar APIs.

const text = new Text("Test");
console.log(text.data); // "Test"

Understanding the Text() Constructor

MDN: the Text() constructor returns a new Text object with the optional string given in the parameter as its textual content.

• Constructor — call with new Text(...).
• Optional string — the node’s initial text.
• Empty default — no argument means "".
• CharacterData family — Text inherits data APIs (like data, length).
• Node family — also a Node (nodeType === 3).

📝 Syntax

new Text()
new Text(string)

Parameters

Return value

A new Text object whose content is the string parameter, or the empty string if no parameter was given.

🔄 new Text() vs createTextNode()

Both produce a Text node. Choose either style—know both so you can read older tutorials that only show document.createTextNode.

const a = new Text("Hello");
const b = document.createTextNode("Hello");

console.log(a.data === b.data);           // true
console.log(a.nodeType === Node.TEXT_NODE); // true
console.log(b.nodeType === 3);            // true

📄 Reading and Updating Text

Examples Gallery

Examples follow MDN Text() and everyday DOM patterns for inserting and inspecting text nodes.

const text = new Text("Test");
console.log(text.data);
console.log(text.nodeName);
console.log(text.nodeType);
console.log(text instanceof Text);

Test
#text
3
true

const empty = new Text();
console.log(JSON.stringify(empty.data));
console.log(empty.length);
console.log(empty.data === "");

""
0
true

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

console.log(p.textContent);
console.log(p.firstChild.nodeName);
console.log(p.childNodes.length);

CodeToFun
#text
1

const viaCtor = new Text("Hello");
const viaDoc = document.createTextNode("Hello");

console.log(viaCtor.data === viaDoc.data);
console.log(viaCtor.nodeType === viaDoc.nodeType);
console.log(viaCtor instanceof Text && viaDoc instanceof Text);

true
true
true

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

text.data = "Hello, CodeToFun";
console.log(span.textContent);
console.log(text.length);

Hello, CodeToFun
16

🚀 Common Use Cases

• Building DOM trees without HTML string parsing.
• Unit tests that assert on real Text nodes.
• Inserting text beside elements without wiping siblings via innerHTML.
• Learning how browsers store text under elements.
• Migrating mental model from createTextNode to constructors.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since October 2017).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Text nodes do not have element attributes or innerHTML.
• Adjacent text siblings can be merged with normalize().
• Related: initMouseEvent(), textContent, appendChild(), nodeType, JavaScript hub.

💡 Best Practices