Javascript after, before, replaceWith, remove – Elemente einfügen, ersetzen, entfernen

Sep 2025

element.before () fügt Elemente vor einem Element als previous Sibling ein, element.after nach einem Element als next Sibling. Sie ersetzen die alten Methoden insertBefore und appendChild, die nur über den Umweg über das parent-Element eingefügt werden konnten.

Elemente vor / nach einem bestimmten Element einfügen

before () und after () fügen Elemente vor einem Element auf der selben Ebene ein, also als Nachbar-Elemente. replaceWith ersetzt ein Element, remove entfernt ein Element. Diese modernen Methoden ergänzen eine ältere Generation von Methoden: Sie sind kurz und gut lesbar sowie direkt auf dem Element nutzbar und werden von allen modernen Browsern unterstützt.

before / after

<figure class="reference">
	<img loading="lazy" src="lamp1.webp" width="500" height="540" alt="lamp1">
	<figcaption>Schwarzer Lampenschirm</figcaption>
</figure>

const reference = document.querySelector ("figure.reference");
const newFigure = document.createElement ("figure");
const img = document.createElement ("img");
img.src = "img/lamp2.webp";
img.width = 500;
img.height = 540;
img.setAttribute ("loading", "lazy");

const figcaption = document.createElement ("figcaption");
figcaption.innerText = "Roter Lampenschirm";

newFigure.append (img, figcaption);
reference.before (newFigure);

elem.append () fügt ein oder mehrere Elemente als childNodes unter einem Element ein, elem.before () fügt ein Element auf derselben Ebene als previous Sibling ein.

Schreibarbeit sparen: cloneNode () kopiert ein Element mitsamt seinen childNodes. reference.after (clone) hängt das geklonte Element nach dem Referenz-Element als next Sibling auf derselben Ebene ein.

const clone = newFigure.cloneNode (true);
clone.querySelector ("img").src = "img/lamp3.webp";
clone.querySelector ("figcaption").innerText = "Weißer Lampenschirm";
reference.after (clone);

replaceWith / replaceNode

replaceWith () ersetzt ein Element durch ein anderes Element und unterscheidet sich von der traditionellen Methode replaceChild: Die Methode macht keinen Umweg über das Parent-Element.

replace With () ersetzt ein Element mit einem oder mehreren Elementen und / Text (bleibt Text, kein innerHTML, das sich zu Elementen entwickelt).

Anstelle von replaceWith unterstützt IE11 replaceNode. Dabei werden alle Eigenschaften des ersetzten Elements entfernt.

Nur IE11

gallaxy[i].onclick = function () {
    let galaxy4 = document.getElementById("i4").cloneNode(true);
    this.replaceNode(galaxy4);
}

Den Ersatzknoten vor dem Aufruf von replaceNode() mit cloneNode kopieren, denn replaceNode verschiebt den Ersatz.

remove

elem.remove() entfernt das Element aus dem DOM.

Melone

Donut

Schlicht und einfach

elem.onclick = function () 
    this.remove()
};

Nicht IE11, aber enthalten im WebReflection/dom4-Polyfill.

DOM Methoden: Alte Funktionen vs neue Generation

Aktion	Neu (modern)	Alt (klassisch)
Element entfernen	element.remove();	element.parentNode.removeChild(element);
Element ersetzen	element.replaceWith(newNode);	element.parentNode.replaceChild(newNode, element);
Vor Knoten einfügen	referenceNode.before(newNode);	referenceNode.parentNode.insertBefore(newNode, referenceNode);
Nach Knoten einfügen	referenceNode.after(newNode);	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);