CharacterData.after() — Methode · JavaScript-Referenz

Signatur

CharacterData.prototype.after(...nodes)

Beschreibung

Mit after() fügst du neue Inhalte direkt hinter einem CharacterData-Knoten ein, also hinter einem Text-Knoten, einem Comment oder einer ProcessingInstruction. Die Methode kommt aus dem Mixin ChildNode und verhält sich genauso wie Element.prototype.after().

Du kannst beliebig viele Argumente übergeben. Das dürfen Node-Objekte oder Zeichenfolgen sein. Zeichenfolgen werden automatisch in Text-Knoten umgewandelt und nicht als HTML ausgewertet. Alle Argumente kommen in der angegebenen Reihenfolge hinein. Intern baut der Browser sie zu einem DocumentFragment zusammen und fügt sie mit einem einzigen Vorgang ein.

Die Methode eignet sich gut, wenn du Text an einer bestimmten Stelle ergänzen oder hervorheben willst, zum Beispiel wenn du nach splitText() ein Element zwischen zwei Textteile setzt. Du brauchst dafür weder parentNode.insertBefore(neu, knoten.nextSibling) noch eine Prüfung auf null.

Hat der Knoten keinen Elternknoten, bewirkt der Aufruf nichts und löst auch keinen Fehler aus. Übergibst du einen Knoten, der schon im Dokument steht, wird er verschoben und nicht kopiert.

Parameter

Name	Typ	Default	Beschreibung
$...nodes	Node \| string		Beliebig viele Knoten oder Zeichenfolgen, die hinter dem aktuellen Knoten eingefügt werden. Zeichenfolgen werden zu `Text`-Knoten. Ohne Argumente passiert nichts.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Text hinter einem Textknoten einfügen

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

// Zeichenfolge und Element hinter dem Textknoten einfügen
const strong = document.createElement('strong');
strong.textContent = 'Welt';
text.after(', ', strong, '!');

console.log(p.outerHTML);
console.log(p.childNodes.length);

Hallo, Welt! 4

Suchbegriff mit splitText() und after() hervorheben

const highlight = (textNode, term) => {
  const index = textNode.data.indexOf(term);
  if (index === -1) return;

  // Text in drei Teile zerlegen: davor | Treffer | danach
  const match = textNode.splitText(index);
  match.splitText(term.length);

  const mark = document.createElement('mark');
  mark.textContent = match.data;
  match.after(mark); // <mark> hinter den Treffer setzen
  match.remove();    // ursprünglichen Treffer-Textknoten entfernen
};

const p = document.createElement('p');
p.textContent = 'JavaScript macht Spaß';
highlight(p.firstChild, 'macht');
console.log(p.innerHTML);

JavaScript macht Spaß

Kommentar-Marker als Einfügepunkt nutzen

const list = document.createElement('ul');
list.innerHTML = '<li>Erster</li><!-- insert-here --><li>Letzter</li>';

const marker = [...list.childNodes]
  .find((n) => n.nodeType === Node.COMMENT_NODE && n.data.trim() === 'insert-here');

const items = ['Zweiter', 'Dritter'].map((label) => {
  const li = document.createElement('li');
  li.textContent = label;
  return li;
});

marker.after(...items);
console.log(list.children.length);

4

Zeichenfolgen werden nicht als HTML ausgewertet

const div = document.createElement('div');
const text = document.createTextNode('Eingabe: ');
div.append(text);

// Sicher: wird als reiner Text eingefügt
text.after('<img src=x onerror=alert(1)>');
console.log(div.innerHTML);

Eingabe: <img src=x onerror=alert(1)>

// Wichtig · Fallstricke

Kein Elternknoten: Ist parentNode gleich null, bewirkt after() nichts. Es gibt keine Fehlermeldung. Das kann Fehler verdecken.
Knoten werden verschoben: Ein Knoten, der schon im DOM steht, wird von seiner alten Position entfernt. Brauchst du eine Kopie, nimm node.cloneNode(true).
Sicherheit: Zeichenfolgen werden als Text eingefügt und nicht als HTML ausgewertet. Das schützt vor XSS, anders als innerHTML oder insertAdjacentHTML(). Wenn du tatsächlich Markup einfügen willst, musst du die Elemente selbst erzeugen.
Ungültige Hierarchie: Wenn du einen Vorfahren des Knotens einfügen willst oder der Elternknoten das Einfügen nicht erlaubt, wird ein HierarchyRequestError (DOMException) ausgelöst.
Benachbarte Textknoten: Fügst du Zeichenfolgen hinter einem Textknoten ein, entstehen mehrere benachbarte Textknoten. Mit parent.normalize() fasst du sie wieder zusammen.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome 54+, Firefox 49+, Safari 10+, Edge 17+). Der Internet Explorer kennt die Methode nicht. Dort hilft ein Polyfill oder insertBefore(neu, knoten.nextSibling).

Siehe auch

CharacterData.before() CharacterData.replaceWith() CharacterData.remove() Element.after() Text.splitText() Node.insertBefore() CharacterData