CSS, HTML und Javascript mit {stil}

Javascript after, before – Elemente einfügen

before, after – Einfügen vor oder nach einem Element

element.before () fügt Elemente vor einem Element als previous Sibling ein, element.after nach einem Element als next Sibling. Sie ersetzen die alten Methoden insertBefore und appendChild, die nur über den Umweg über das parent-Element eingefügt werden konnten.

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

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

    lamp1
    Schwarzer Lampenschirm
<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);

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