JavaScript Text() Constructor

Beginner
5 min read
Updated: Nov 2026
5 examples
Constructor

Definition

new Text(string) returns a new Text node — the DOM object that holds character data inside elements. Per MDN, omit the argument for an empty string.

Pass the required arguments shown below. A Text node is not visible until you append it; prefer data / textContent to update content.

Syntax

Create a Text node. Start with this line.

JavaScript
new Text(string?)
CallWhat it does
new Text(string?)Primary signature.

Built into the browser. Call new Text(...) (or document.createTextNode) — no import required.

Library declarations
JavaScript
new Text(string?)

Parameters

ParameterDescription
stringOptional. Initial textual content (default "")

Return Value

Return ValueDescription
*A new Text node

JavaScript Examples

Example 1 — Basic new Text()

Create a text node and inspect its content and type.

JavaScript
const text = new Text("Test");
console.log(text.data);           // "Test"
console.log(text.nodeName);       // "#text"
console.log(text.nodeType);       // 3
console.log(text instanceof Text); // true
Try It Yourself

How It Works

  1. Call the constructor. Pass the string you want as content.
  2. Read data. That is the node’s textual content.
  3. Check identity. nodeName is "#text"; nodeType is 3.
  4. Still detached. Nothing appears on the page until you append it.

Example 2 — Empty new Text()

Omit the argument to get an empty text node.

JavaScript
const empty = new Text();
console.log(JSON.stringify(empty.data)); // ""
console.log(empty.length);               // 0
console.log(empty.data === "");          // true
Try It Yourself

How It Works

  1. No argument. MDN: content defaults to the empty string.
  2. Check data. Still a real Text node, just blank.
  3. length is 0. CharacterData length matches the string.
  4. Fill later. Assign empty.data = "Hi" when ready.

Example 3 — Append to the DOM

Attach the node so its text shows as the parent’s content.

JavaScript
const p = document.createElement("p");
const text = new Text("CodeToFun");
p.appendChild(text);
console.log(p.textContent);            // "CodeToFun"
console.log(p.firstChild.nodeName);    // "#text"
console.log(p.childNodes.length);      // 1
Try It Yourself

How It Works

  1. Make a parent. Any element — here a <p>.
  2. Create the text. new Text("CodeToFun").
  3. Append. appendChild inserts the text node as a child.
  4. Read back. p.textContent reflects the text node’s data.

Example 4 — Text() vs createTextNode()

Both APIs create the same kind of node.

JavaScript
const viaCtor = new Text("Hello");
const viaDoc = document.createTextNode("Hello");
console.log(viaCtor.data === viaDoc.data);                 // true
console.log(viaCtor.nodeType === viaDoc.nodeType);         // true
console.log(viaCtor instanceof Text && viaDoc instanceof Text); // true
Try It Yourself

How It Works

  1. Use both APIs. Constructor vs Document method.
  2. Same data. Both hold "Hello".
  3. Same type. Both are Text with nodeType 3.
  4. Pick either. Prefer one style in a codebase and stay consistent.

Example 5 — Update data

Change the string after the node is appended — the parent updates.

JavaScript
const span = document.createElement("span");
const text = new Text("Hi");
span.appendChild(text);
text.data = "Hello, CodeToFun";
console.log(span.textContent); // "Hello, CodeToFun"
console.log(text.length);      // 16
Try It Yourself

How It Works

  1. Append first. The text node is live in the tree.
  2. Assign data. CharacterData updates in place.
  3. Parent reflects it. span.textContent shows the new string.
  4. No recreate needed. Prefer updating over building a new node each time.

Browser Support

The Text() constructor is marked Baseline Widely available on MDN (since October 2017). It is a browser DOM API — not a Node.js built-in.

✓ Baseline · Widely available

Text()

Supported across modern Chrome, Firefox, Safari, and Edge for creating DOM text nodes.

98% 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() Excellent

Bottom line: Safe for production. Use new Text(string) or document.createTextNode(); append before expecting visible text.

Frequently Asked Questions

new Text() or new Text(string) returns a new Text (DOM text) node. If you pass a string, that becomes the node’s textual content; if you omit it, the content is the empty string.
No. MDN marks the Text() constructor as Baseline Widely available (since October 2017). It is not Deprecated, Experimental, or Non-standard.
Both create Text nodes. document.createTextNode(data) is the classic Document method; new Text(string) is the modern constructor. For everyday code either is fine.
No. Creating a Text node only builds an object. Append it with parent.appendChild(text) (or similar) before it appears in the document.
Text nodes have nodeType 3 (Node.TEXT_NODE) and nodeName "#text". You can also read the string via data, nodeValue, or textContent.
Yes. Assign to text.data, text.nodeValue, or text.textContent after the node exists—including after it is in the DOM.

Next: splitText()

Break one Text node into two at a character offset.

splitText() →

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.

10 people found this page helpful