Javascript after, before – Elemente einfügen

Elemente vor einem bestimmten Element einfügen

Viele der komfortablen Methoden aus jQuery haben den Weg ins moderne Vanilla Javascript – pures Javascript ohne Libraries – geschafft. before() und after () fügen Elemente vor einem Element auf der selben Ebene ein, also als Nachbar-Elemente. Die älteren Methoden wie appendChild () und insertBefore () hingegen fügen childNodes unter einem Parent-Element ein.

before und after werden von allen immergrünen Browsern unterstützt. Microsoft unterstützt before(), after() ab Edge 17 (April 2018), IE11 bleibt außen vor. WebReflection/dom4 ist ein Polyfill für alte Browser.

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.

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.