Javascript after, before, remove, replaceWith

before, after, remove, replace

before fügt Elemente oder Texte vor einem Element ein, after nach einem Element. replaceWith ersetzt ein Element durch andere Elemente, remove entfernt ein Element. Wie das schlichte .before() in jQuery – die neuen Methoden sind schnell und effizient, aber werden von IE11 noch nicht unterstützt.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Vanilla Javascript vs jQuery

Viele der komfortablen Methoden aus jQuery haben den Weg in Vanilla Javascript – pures Javascript ohne Libraries – geschafft. Wenn da nicht IE11 wäre … oder war? IE11 ist seit Ende 2020 nur noch eine Randerscheinung.

myElem.before ("text1", elem1, elem2, "text2")

Während insertBefore nur ein einzelnes Element aufnimmt, kann before sowohl mehrere Strings und Elemente (durch Kommas getrennt) aufnehmen.

before wird von allen immergrünen Browsern unterstützt, aber wenn IE11 unterstützt werden soll, müssen wir uns noch einige Zeit an insert Before und dem 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

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.

Bild 3 Ersetzen mit replace Bild 1 Ersetzen mit replace Bild 2 Ersetzen mit replace
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.

3-400

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.