Javascript before

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.

Da werden wir uns noch einige Zeit an insert Before und dem komplizierten Aufruf von replace Child und remove Child halten müssen …

before / after

let img = document.createElement("IMG");
img.addEventListener ("load", function () {
   let h4 = document.createElement ("H4");
   h4.innerHTML = "Melone";

   let para = document.createElement ("P");
   para.innerHTML = "Viele Kerne, grüne Schale";

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