Element.after() — Methode · JavaScript-Referenz

Signatur

Element.prototype.after(...nodes)

Beschreibung

Element.after() fügt beliebig viele Node-Objekte oder Zeichenketten als nachfolgende Geschwister des Elements ein. Die Reihenfolge der Argumente bleibt erhalten. Zeichenketten werden automatisch in Text-Knoten umgewandelt. HTML-Markup wird dabei nicht ausgewertet.

Die Methode ist die moderne und kürzere Alternative zum umständlichen Muster parent.insertBefore(neu, el.nextSibling). Einen Verweis auf den Elternknoten brauchst du nicht, und du kannst mehrere Knoten mit einem einzigen Aufruf einfügen. Intern landen mehrere Argumente zuerst in einem DocumentFragment, sodass nur eine einzige Einfügeoperation stattfindet.

Ist ein übergebener Knoten schon im Dokument, wird er verschoben und nicht kopiert. Wenn du eine Kopie brauchst, rufe vorher cloneNode(true) auf. Hat das Element keinen Elternknoten, tut der Aufruf nichts und löst auch keinen Fehler aus.

after() gibt es nicht nur bei Element, sondern über das Mixin ChildNode auch bei CharacterData (z. B. Text, Comment) und DocumentType.

Parameter

Name	Typ	Default	Beschreibung
$...nodes	Node \| string		Beliebig viele Knoten oder Zeichenketten, die in genau dieser Reihenfolge hinter dem Element eingefügt werden. Zeichenketten werden zu `Text`-Knoten. Ohne Argumente passiert nichts.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück.

Beispiele

Element und Text hinter einer Überschrift einfügen

const heading = document.createElement('h2');
heading.textContent = 'Titel';
document.body.append(heading);

const hint = document.createElement('p');
hint.textContent = 'Untertitel';

// Knoten und Zeichenkette in einem Aufruf
heading.after(hint, ' – Stand: heute');

console.log(document.body.innerHTML);

<h2>Titel</h2><p>Untertitel</p> – Stand: heute

Fehlermeldung hinter einem Formularfeld anzeigen

const showError = (input, message) => {
  // Alte Meldung entfernen, falls vorhanden
  const next = input.nextElementSibling;
  if (next?.classList.contains('error')) next.remove();

  const error = document.createElement('span');
  error.className = 'error';
  error.textContent = message; // sicher: kein HTML-Parsing
  input.after(error);
};

const email = document.querySelector('#email');
if (email && !email.value.includes('@')) {
  showError(email, 'Bitte eine gültige E-Mail-Adresse eingeben.');
}

Verschieben statt Kopieren

const list = document.createElement('ul');
list.innerHTML = '<li>A</li><li>B</li><li>C</li>';

const [a, b, c] = list.children;
// a ist schon im DOM – er wird hinter c verschoben
c.after(a);
console.log([...list.children].map(li => li.textContent).join(','));

// Kopie einfügen: vorher klonen
c.after(b.cloneNode(true));
console.log([...list.children].map(li => li.textContent).join(','));

B,C,A B,C,B,A

// Wichtig · Fallstricke

Kein HTML-Parsing: el.after('<b>x</b>') fügt den Text wörtlich ein. Das schützt vor XSS. Für Markup verwendest du insertAdjacentHTML('afterend', …), bei Nutzereingaben aber nur nach vorheriger Bereinigung.
Ohne Elternknoten (z. B. bei einem noch nicht eingehängten Element) passiert nichts, und es gibt auch keinen Fehler.
Vorhandene Knoten werden verschoben. Übergibst du einen Vorfahren des Elements oder ein ungültiges Ziel, wird ein HierarchyRequestError (DOMException) geworfen.
Das Element selbst als Argument (el.after(el)) ist erlaubt und lässt die Position unverändert.
Kompatibilität: Chrome 54+, Firefox 49+, Safari 10+, Edge 17+. Internet Explorer unterstützt die Methode nicht. Dort hilft parentNode.insertBefore(node, el.nextSibling) oder ein Polyfill.

Siehe auch

Element.before() Element.append() Element.prepend() Element.remove() Element.animate()