JavaScript Document createTextNode() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word CREATETEXTNODE

Definition

document.createTextNode(data) creates a new Text node containing a string. MDN notes it can escape HTML characters — < and & stay as plain text, not markup. Append the node to show it on the page.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.createTextNode. Start with this line.

JavaScript
document.createTextNode(data)
CallWhat it does
document.createTextNode(data)Primary signature.
document.createTextNode(...)Call with the arguments your case needs.

Built into the browser. Call createTextNode(...) on document — no import required.

Library declarations
JavaScript
document.createTextNode(data)

Parameters

ParameterDescription
dataRequired. String put into the Text node (MDN)

Return Value

Return ValueDescription
*A Text node (detached until appended)

JavaScript Examples

Example 1 — Create and Append (MDN Style)

Create a Text node and append it to a paragraph.

JavaScript
function addTextNode(text) {
  const newText = document.createTextNode(text);
  const p1 = document.getElementById("p1");
  p1.appendChild(newText);
}

addTextNode("YES! ");
console.log(document.getElementById("p1").textContent);
Try It Yourself

How It Works

  1. Create. createTextNode(text) returns a detached Text node (MDN).
  2. Find the parent (here, #p1).
  3. Append. appendChild places the node in the tree so it renders.
  4. Repeat safely. Each call adds another Text sibling (MDN button demo).

Example 2 — Escape HTML Characters

MDN: use createTextNode so markup characters stay literal.

JavaScript
const box = document.getElementById("box");
const unsafe = "<b>Hi</b> & friends";

box.appendChild(document.createTextNode(unsafe));
// Shows: <b>Hi</b> & friends  (no bold element)

console.log(box.textContent);
console.log(box.querySelector("b")); // null
Try It Yourself

How It Works

  1. Pass a string with tags. It looks like HTML, but is only data.
  2. Create a Text node. The engine stores characters, not elements.
  3. Append. The page shows <b> as text, not bold markup.
  4. Safer than innerHTML for untrusted strings (MDN escape note).

Example 3 — Inspect nodeType and data

Confirm you created a Text node before attaching it.

JavaScript
const text = document.createTextNode("Hello");

console.log(text.nodeType);   // 3 (TEXT_NODE)
console.log(text.nodeName);   // "#text"
console.log(text.data);       // "Hello"
console.log(text instanceof Text); // true
Try It Yourself

How It Works

  1. Create with any string (here "Hello").
  2. nodeType is 3 for text nodes.
  3. data (also nodeValue) holds the characters.
  4. Still detached until you append — inspection works either way.
Compatibility

Browser Support

Document.createTextNode() is a browser DOM API marked Baseline Widely available on MDN (since July 2015).

✓ Baseline Widely available

Document.createTextNode()

Create Text nodes for safe, visible text in HTML and XML documents.

Baseline Widely available
Google Chrome All modern versions
Yes
Microsoft Edge All modern versions
Yes
Mozilla Firefox All modern versions
Yes
Apple Safari All modern versions
Yes
Opera All modern versions
Yes
Internet Explorer IE 6+
Yes
createTextNode() Excellent in browsers

Bottom line: Safe in modern and legacy browsers. See the MDN createTextNode() reference.

Frequently Asked Questions

MDN: Document.createTextNode() creates a new Text node. Pass a string (data) and you get a Text node you can append into the DOM.
No. MDN marks Document.createTextNode() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A Text node (MDN). Read text.data, text.nodeValue, or text.textContent for the string.
MDN notes this method can be used to escape HTML characters. Characters like < and & stay as plain text — they are not parsed as markup (unlike innerHTML).
Node.TEXT_NODE, which equals 3. You can also use text instanceof Text.
Use createTextNode when you need an actual Text node to insert, move, or split. Assigning element.textContent is shorter when you only want to replace all text inside an element.

Next: createTouch()

Continue with the next Document method in the tutorial series.

createTouch() →

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)

17 people found this page helpful

JavaScript Document createRange() Method JavaScript Document createTouch() Method