CSS, HTML und Javascript mit {stil}

Javascript after, before, remove, replaceWith

before, after, remove, replace

element.before fügt Elemente vor einem Element ein, element.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 diese modernen Methoden wurde von IE11 noch nicht unterstützt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

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.