Document.createTextNode() — Methode · JavaScript-Referenz

Signatur

document.createTextNode(data)

Beschreibung

document.createTextNode() erzeugt einen neuen Text-Knoten, der noch keinem Element zugeordnet ist. Einfügen kannst du ihn z. B. mit append(), appendChild(), insertBefore() oder before()/after(). Bis dahin existiert der Knoten nur im Speicher und wird nicht angezeigt.

Der übergebene Text wird nicht als HTML geparst. Zeichen wie <, > oder & erscheinen also genau so auf der Seite, wie sie im String stehen. Deshalb eignet sich die Methode gut dafür, Benutzereingaben oder Daten von außen sicher auszugeben. Wird der Knoten später serialisiert, etwa über innerHTML des Elternelements, sind diese Zeichen maskiert.

Gegenüber textContent hat die Methode einen Vorteil: Du kannst Text zwischen anderen Elementen einfügen, ohne vorhandene Kindknoten zu überschreiben. Außerdem behältst du einen Verweis auf den Knoten und kannst seinen Inhalt später über data bzw. nodeValue ändern. Das ist zum Beispiel bei Zählern oder Live-Anzeigen praktisch.

Parameter

Name	Typ	Default	Beschreibung
$data Pflicht	string		Der Textinhalt des neuen Knotens. Andere Werte werden in einen String umgewandelt, z. B. wird `42` zu `"42"` und `null` zu `"null"`.

Rückgabewert

Typ

Text

Beschreibung

Ein neuer Text-Knoten, der noch nicht im Dokument eingehängt ist (parentNode ist null).

Beispiele

Benutzereingabe sicher ausgeben (HTML maskieren)

const kommentar = '<img src=x onerror="alert(1)">Hallo!';
const p = document.createElement('p');
p.appendChild(document.createTextNode(kommentar));
document.body.append(p);

// Der Inhalt wird als Text angezeigt, nicht ausgeführt
console.log(p.innerHTML);

<img src=x onerror="alert(1)">Hallo!

Text zwischen Elementen einfügen, ohne Kinder zu überschreiben

const label = document.createElement('label');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';

// Checkbox und Beschriftung kommen in dasselbe Element
label.append(checkbox, document.createTextNode(' Newsletter abonnieren'));
document.body.append(label);

console.log(label.childNodes.length);

2

Live-Zähler über eine Knoten-Referenz aktualisieren

const status = document.createElement('span');
const zaehlerText = document.createTextNode('0');
status.append('Klicks: ', zaehlerText);
document.body.append(status);

let klicks = 0;
document.addEventListener('click', () => {
  // Nur der Textknoten ändert sich, das Element wird nicht neu aufgebaut
  zaehlerText.data = String(++klicks);
});

Eine HTML-Escape-Hilfsfunktion

const escapeHtml = (str) => {
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
};

console.log(escapeHtml('Tom & Jerry <3'));

Tom & Jerry <3

// Wichtig · Fallstricke

Sicherheit: Ein Textknoten verhindert XSS nur im Textinhalt von Elementen. Wenn du den Text in Attribute wie href oder onclick, in <script>-Inhalte oder in eval() übernimmst, schützt er nicht. Auch die Escape-Hilfsfunktion über innerHTML maskiert keine Anführungszeichen (", '). Für Attribut-Kontexte reicht sie deshalb nicht.
Der Knoten muss erst eingefügt werden, sonst ist er nicht sichtbar. Wenn du denselben Knoten ein zweites Mal einfügst, wird er verschoben, nicht kopiert. Für eine Kopie brauchst du cloneNode().
Mehrere aufeinanderfolgende Textknoten bleiben getrennte Knoten. Mit Node.normalize() fasst du sie zu einem zusammen.
Wenn du nur Text anhängen willst, geht es kürzer: element.append('Text') erzeugt den Textknoten automatisch. Zum vollständigen Ersetzen des Inhalts ist textContent einfacher.
Für viele Einfügungen hintereinander sammelst du die Knoten am besten zuerst in einem DocumentFragment. So wird das Layout seltener neu berechnet.
Die Methode wird in allen Browsern unterstützt. In Node.js gibt es sie nur mit einer DOM-Implementierung wie jsdom.

Siehe auch

Text Element.append() Node.normalize() Document.createEvent() Document.createRange()