JavaScript Document createTextNode() Method

What You’ll Learn

document.createTextNode() is an instance method that creates a new Text node (see MDN Document: createTextNode()). Learn the data parameter, how Text nodes escape HTML characters, how to append them, how they differ from innerHTML, and five try-it labs.

Introduction

Almost every visible string on a web page lives inside a Text node — the characters between tags. When you write <p>Hello</p>, the word Hello is a Text node child of the paragraph.

document.createTextNode(data) builds that kind of node in JavaScript. MDN also notes an important safety tip: this method can be used to escape HTML characters. If the string contains < or &, they stay as text instead of becoming markup.

Related tutorials: createElement(), createComment(), textContent.

Understanding document.createTextNode()

An instance method on Document (usually document.createTextNode(...) on the live page).

• data — string put into the Text node (MDN).
• Return value — a new Text node (MDN).
• HTML escaping — MDN: can escape HTML characters (safe plain text).
• nodeType — Node.TEXT_NODE (3).
• Read back — text.data, text.nodeValue, or text.textContent.
• Attach — use appendChild, append, or insertBefore.

📝 Syntax

General form of Document.createTextNode (MDN):

createTextNode(data)

Parameters

• data — a string containing the data to put in the text node (MDN).

Return value

A Text node (MDN).

Exceptions

None listed for createTextNode() on MDN.

MDN example

Buttons append their labels into a paragraph as Text nodes:

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

document.querySelectorAll("button").forEach((button) => {
  button.addEventListener("click", (event) => {
    addTextNode(`${event.target.textContent} `);
  });
});

⚖️ Text nodes vs related APIs

Examples Gallery

Examples follow MDN Document: createTextNode() and practical Text-node patterns for beginners.

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

// Click "YES!" → appends "YES! " as plain text
addTextNode("YES! ");
console.log(document.getElementById("p1").textContent);

First line of paragraph.YES! 

const box = document.getElementById("safe");
const risky = "<img src=x onerror=alert(1)>";

box.appendChild(document.createTextNode(risky));

console.log(box.childNodes[0].nodeName); // "#text"
console.log(box.textContent);            // shows the <img ...> string literally

#text
<img src=x onerror=alert(1)>

const t = document.createTextNode("CodeToFun");

console.log(t.data);                              // "CodeToFun"
console.log(t.nodeType);                          // 3
console.log(t.nodeType === Node.TEXT_NODE);       // true
console.log(t instanceof Text);                   // true

CodeToFun
3
true
true

const li = document.createElement("li");
const label = document.createTextNode("Learn createTextNode");
li.appendChild(label);

document.getElementById("list").appendChild(li);
console.log(li.textContent); // "Learn createTextNode"

Learn createTextNode

const raw = "<strong>Bold?</strong>";

const a = document.getElementById("as-text");
const b = document.getElementById("as-html");

a.appendChild(document.createTextNode(raw));
b.innerHTML = raw;

console.log(a.childElementCount); // 0 (only a Text node)
console.log(b.childElementCount); // 1 (<strong> element)

0
1

🚀 Common Use Cases

• Safe user content — show names, comments, or search terms without parsing HTML (MDN escape note).
• Building lists and labels — pair with createElement.
• Incremental appends — MDN button demo adds text over time.
• Editors / Ranges — insert Text nodes at a caret.
• Teaching the DOM — contrast Text vs Element vs Comment.
• Whitespace control — create exact spaces or empty text nodes when needed.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• Creates a new Text node from a data string (MDN).
• Can be used to escape HTML characters (MDN).
• nodeType is 3 (TEXT_NODE).
• Detached until you append or insert it.
• Related: createElement(), createComment(), textContent.

💡 Best Practices