CharacterData.appendData() — Methode · JavaScript-Referenz

Signatur

CharacterData.prototype.appendData(data)

Beschreibung

appendData() ist eine Methode des abstrakten Interfaces CharacterData und steht damit auf allen Knoten zur Verfügung, die reinen Zeicheninhalt tragen: Text, Comment, CDATASection und ProcessingInstruction. Sie hängt den übergebenen String direkt an die Eigenschaft data des Knotens an. Das Ergebnis ist gleichwertig zu node.data += text.

Die Methode eignet sich besonders dann, wenn ein vorhandener Textknoten schrittweise wachsen soll. Beispiele sind Log-Ausgaben, Live-Ticker oder das zeichenweise Einblenden von Text („Schreibmaschinen-Effekt“). Anders als element.textContent += ... oder innerHTML += ... bleibt dabei der bestehende Knoten erhalten. Es werden also keine Geschwisterknoten ersetzt, keine Event-Listener gehen verloren und laufende Range- oder Selektionsobjekte bleiben gültig.

Der angehängte Text wird nie als HTML interpretiert. Zeichen wie < oder & erscheinen wörtlich im Dokument. Deshalb lassen sich mit appendData() auch Benutzereingaben sicher ausgeben. Die Methode löst einen MutationObserver-Eintrag vom Typ characterData aus.

Parameter

Name	Typ	Default	Beschreibung
$data Pflicht	string		Die Zeichenkette, die an den aktuellen Inhalt angehängt wird. Andere Werte werden in einen String umgewandelt, z. B. wird `42` zu `"42"` und `null` zu `"null"`.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Der Knoten wird direkt verändert.

Beispiele

Text an einen bestehenden Textknoten anhängen

const text = document.createTextNode('Hallo');
document.body.append(text);

text.appendData(', Welt!');
console.log(text.data);
console.log(text.length);

Hallo, Welt! 12

Schreibmaschinen-Effekt ohne Neuaufbau des DOM

const output = document.querySelector('#ausgabe');
const node = document.createTextNode('');
output.append(node);

const message = 'Daten werden geladen …';
let i = 0;
const timer = setInterval(() => {
  node.appendData(message[i++]);
  if (i >= message.length) clearInterval(timer);
}, 50);

Benutzereingabe sicher ausgeben (kein HTML-Parsing)

const log = document.createTextNode('Eingabe: ');
document.body.append(log);

const userInput = '<img src=x onerror=alert(1)>';
log.appendData(userInput);
console.log(document.body.innerHTML.includes('&lt;img'));

true

Kommentarknoten erweitern und Änderung beobachten

const comment = document.createComment(' Build ');
document.body.append(comment);

const observer = new MutationObserver((records) => {
  for (const r of records) console.log(r.type, '→', r.target.data);
});
observer.observe(comment, { characterData: true });

comment.appendData('2024-06-01 ');

characterData → Build 2024-06-01

// Wichtig · Fallstricke

Nur auf CharacterData-Knoten: Element-Knoten haben kein appendData(). Den Textknoten erhält man z. B. über element.firstChild oder document.createTextNode(). Vorher sollte man node.nodeType === Node.TEXT_NODE prüfen.
Kein Parameter ist ein Fehler: Ein Aufruf ohne Argument wirft einen TypeError. undefined ausdrücklich zu übergeben hängt dagegen die Zeichenkette \"undefined\" an.
Sicherheit: Der Inhalt wird nie als Markup geparst und ist deshalb XSS-sicher. Das ist ein Vorteil gegenüber innerHTML +=.
Leistung: Bei sehr vielen kleinen Aufrufen wird jedes Mal neu layoutet, sobald der Knoten sichtbar ist. Große Textmengen sollte man vorher sammeln und einmal anhängen.
Mehrere nebeneinanderliegende Textknoten lassen sich mit Node.normalize() zusammenführen.
Die Methode wird von allen Browsern und von DOM-Implementierungen wie jsdom unterstützt.

Siehe auch

CharacterData CharacterData.insertData() CharacterData.deleteData() CharacterData.replaceData() CharacterData.data Document.createTextNode() new VRFrameData()