Vanilla Javascript vs jQuery
Viele der komfortablen Methoden aus jQuery haben den Weg ins moderne Vanilla Javascript – pures Javascript ohne Libraries – geschafft. Wenn da nicht IE11 wäre … oder war? IE11 ist seit Ende 2020 nur noch eine Randerscheinung.
let newP1 = document.createElement ("p"); let newP2 = document.createElement ("p"); oldNode.before (newP1, "text1", newP2, "text2") // oder oldNode.after (newP1, "text1", newP2, "text2")
Während insertBefore nur ein einzelnes Element aufnimmt, können before und after sowohl mehrere Strings und Elemente (durch Kommas getrennt) aufnehmen.
before und after werden von allen immergrünen Browsern unterstützt, aber wenn IE11 unterstützt werden soll, müssen wir uns weiterhin an insert Before und den komplizierten Aufruf von replace Child und remove Child halten …
before / after
const img = document.createElement("IMG");
img.addEventListener ("load", function () {
const h4 = document.createElement ("H4");
h4.innerHTML = "Melone";
const para = document.createElement ("P");
para.innerHTML = "Viele Kerne, grüne Schale";
const thumb = document.createElement("div");
thumb.appendChild(img);
document.querySelector(".card1").before (h4, thumb, para, "und erfrischend im Sommer");
});
img.src = "melone.png";
Microsoft unterstützt before(), after() und replaceWith ab Edge 17 (April 2018), aber IE11 bleibt weiter außen vor. WebReflection/dom4 ist ein Polyfill für alte Browser.
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.