Signatur
Beschreibung
Der Konstruktor new Text() erzeugt einen DOM-Textknoten (nodeType === 3), der zu dem Dokument gehört, dem das aktuelle globale Objekt zugeordnet ist (normalerweise window.document). Das Ergebnis ist gleichwertig mit document.createTextNode(data), ist aber kürzer und passt besser zu modernem, klassenbasiertem Code.
Textknoten eignen sich, um Benutzereingaben oder andere dynamische Zeichenketten sicher ins DOM einzufügen. Der Inhalt wird immer als reiner Text behandelt und nie als HTML ausgewertet. Deshalb sind Textknoten eine gute Alternative zu innerHTML, wenn nur Text gebraucht wird.
Der neue Knoten hängt zunächst nirgends im DOM. Er erscheint erst, wenn man ihn z. B. mit append(), appendChild(), before() oder insertBefore() einfügt. Danach lässt sich der Inhalt über data, nodeValue oder textContent ändern, ohne dass der Knoten neu erzeugt wird. Das ist praktisch für Zähler, Statusanzeigen und Ähnliches.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $data | string | "" | Anfänglicher Textinhalt des Knotens. Andere Werte als Strings werden in einen String umgewandelt (z. B. 42 → "42", null → "null"). Ohne Argument ist der Inhalt ein leerer String. |
Rückgabewert
Text-Knoten, der zum aktuellen document gehört und noch nicht ins DOM eingefügt ist.Beispiele
Textknoten erzeugen und einfügen
const absatz = document.createElement('p');
const text = new Text('Hallo Welt!');
absatz.append(text);
document.body.append(absatz);
console.log(text.nodeType, text.data, text.parentNode === absatz);Benutzereingaben sicher anzeigen (ohne XSS)
const eingabe = '<img src=x onerror="alert(1)">';
const ausgabe = document.querySelector('#kommentar') ?? document.body;
// Wird als Text angezeigt, nicht als HTML ausgeführt
ausgabe.replaceChildren(new Text(eingabe));
console.log(ausgabe.innerHTML);Live-Zähler: Knoten wiederverwenden statt neu rendern
const label = document.createElement('span');
const zaehlerText = new Text('0');
label.append('Klicks: ', zaehlerText);
document.body.append(label);
let klicks = 0;
document.addEventListener('click', () => {
zaehlerText.data = String(++klicks); // nur der Textknoten ändert sich
});Leerer Knoten und Typumwandlung
const leer = new Text();
const zahl = new Text(42);
console.log(JSON.stringify(leer.data), leer.length);
console.log(typeof zahl.data, zahl.data);
console.log(zahl instanceof CharacterData, zahl instanceof Node);// Wichtig · Fallstricke
- Dokument-Zuordnung: Der Knoten gehört immer zum Dokument des aktuellen Fensters. Für andere Dokumente (z. B. aus
DOMParseroder einem iframe) nimmt manotherDoc.createTextNode(). Man kann den Knoten auch einfach einfügen, dann übernimmt das Zieldokument ihn automatisch (Adoption). - Kein HTML: Tags im String werden nicht ausgewertet. Das ist gewollt und schützt vor XSS. Wer Markup braucht, muss Elemente erzeugen.
- Mehrere benachbarte Textknoten bleiben getrennt, bis man
Node.normalize()aufruft. Das kann Code stören, der sich aufchildNodesverlässt. - Im Gegensatz zu
document.createTextNode()ist das Argument hier optional. - Kompatibilität: Unterstützt in allen modernen Browsern (Chrome 28+, Firefox 24+, Safari 8+, Edge), nicht im Internet Explorer. In Node.js gibt es den Konstruktor nur über DOM-Implementierungen wie jsdom.