Javascript after, before – Elemente vor anderen / nach anderen einfügen

Sep 2025

element.before () fügt Elemente vor einem Element ein, element.after nach einem Element. 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);

before und after vs prepend und append

Methode	Fügt außerhalb oder innerhalb des Elements ein?	Beschreibung
before()	außerhalb, davor	Fügt ein neues Element vordas aktuelle Element (auf derselben Ebene im DOM).
after()	außerhalb, danach	Fügt ein neues Element nachdas aktuelle Element (auf derselben Ebene im DOM).
prepend()	innerhalb, am Anfang	Fügt ein neues Element indas aktuelle Element ganz vorne (als erstes Kind) ein.
append()	innerhalb, am Ende	Fügt ein neues Element indas aktuelle Element ganz hinten (als letztes Kind) ein.

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).

const gallery = document.querySelector("#gallery");
const placeHere = document.getElementById("placehere");

const reps = [];

for (let i = 0; i < 3; i++) {
    const wrapper = document.createElement("div");
    wrapper.classList.add("rep");

    const img = new Image();
    img.src = `/javascript/img/food-painted-0${i + 1}-500.png`;

    img.onload = () => {
      wrapper.append(img);
    };

    reps.push(wrapper);
}

placeHere.addEventListener("click", function () {
    this.replaceWith(...reps);
});

remove

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

Melone

Donut

Schlicht und einfach

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

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);