Javascript insertBefore, replaceChild, remove Child

Elemente mit insertBefore einfügen

insertBefore fügt ausschließlich Node-Elemente ein und keine Strings. Dafür muss sowohl das Element identifiziert werden, vor dem ein neuer Knoten eingefügt wird, als auch das parentElement.

reference.parentElement.insertBefore (newChild, reference);

<ul class="demolist">
	<figure>
		<img src="lamp1.webp" width="500" height="540" alt="lamp2">
	</figure>
	<figure>
		<img src="lamp2.webp" width="500" height="540" alt="lamp2">
	</figure>
</ul>

const list = document.querySelectorAll (".demolist figure");

const figure = document.createElement ("figure");
const img = document.createElement ("img");
img.src = "lamp3.webp";

list[1].parentElement.insertBefore (img, list[1]);

// oder alternativ 

const neu = list[1].parentElement.insertBefore (img, list[1]);

Der Rückgabewert von insertBefore ist das neu eingefügte Element. Das macht Sinn, wenn das neue Element noch an anderer Stelle gebraucht wird.

replaceChild()

Gleich vorweg: replaceChild und removeChild sind zuverlässige, allerdings auch uralte Methoden. Wenn ausgediente Browser wie IE11 nicht unterstützt werden müssen, sind die modernen Methoden replaceWith und remove unkomplizierter.

Javascript node.replaceChild (newChild, oldChild) ersetzt unterhalb des Knotens node den Knoten oldChild durch den Knoten newChild. Der ersetzte Knoten wird automatisch gelöscht.

Dabei können sowohl der ersetzte Knoten als auch der neue Knoten komplette Blöcke mitsamt beliebig vielen Kindknoten sein. Der neue Knoten kann mit cloneNode aus dem Dokument kopiert werden (z.B. komfortabel mit einem HTML-Template-Element) oder kann ein neu erzeugter Knoten sein.

<ul id="aList">
   <li>Montag</li>
   <li>Dienstag</li>
   <li>Mittwoch</li>
</ul>

Um den Knoten mit der id aList durch den neu erzeugten Knoten newNode zu ersetzen, muss newNode unterhalb des parentNode des alten Knotens eingehangen werden: oldNode.parentNode.replaceChild(newNode, oldNode);.

const old = document.querySelector('#aList');
const new = document.createElement('p');
const newText = document.createTextNode('An drei Tagen in der Woche');
new.appendChild(newText);
old.parentNode.replaceChild(new, old);
new.setAttribute('id','aList');

Wenn das Skript nach dem Ersetzen des alten Knotens erneut angestoßen wird, würde es einen Fehler erzeugen, weil das Element mit id="aList" nicht mehr existiert. Darum bekommt das neu erzeugte Element die ID aList.

replaceChild mit dem Umweg über den Parent-Node ist eine alte Methode. Wer auf IE11 verzichten kann, hat mit replaceWith eine moderne Methode, die Elemente ohne jeden Umweg direkt ersetzt.

const oldNode = document.querySelector ("ul");
let newElement = document.createElement ("input");
newElement.value = "Schreib mal wieder was!";

oldNode.replaceWith (newElement);

removeChild()

Bilder löschen

Javascript node.removeChild(oldChild) entfernt den Knoten oldChild unterhalb des Knotens node.

Dabei kann der Knoten oldChild ein vollständiges Fragment mit eigenen Kindknoten sein – removeChild entfernt den kompletten Block mit sämtlichen Unterknoten.

<div id="birds" >
  <img src="bird6.png" alt="" width="190" height="121" />
  <img src="bird5.png" alt="" width="190" height="121" />
  <img src="bird4.png" alt="" width="190" height="121" />
</div>
<button id="removeBirds">Bilder löschen</button>

document.getElementById('removeBirds').onclick = function () {
    if (document.getElementById('birds')) {
        var birds = document.getElementById('birds');
        birds.parentNode.removeChild(birds);
    }
}

Das Element wird anhand seines id-Attributs birds identifiziert und schnell und schmerzlos mitsamt seinem Kindknoten aus seinem Elternknoten entfernt.

Mit dieser Syntax wird das Element aus dem DOM entfernt, aber nicht gelöscht, sondern schwebt als ungebundenes Element abseits vom DOM.

Äquivalent zu replaceWith gibt es eine moderne Javascript-Methode remove (), die ein Elemente direkt ohne den Weg über den Parent-Node aus dem DOM abhängt.

const oldNode = document.querySelector("ul");

oldNode.remove();

Alte Methoden vs moderne Methoden

insertBefore () ist eine alte DOM-Methode, ein insertAfter () gibt es nicht. Auch removeChild und replaceChild gehören einer älteren Generation an und können durch die Methoden der jüngeren Generation ersetzt werden. Diese Methoden gelten deswegen nicht als deprecated, sondern können weiter verwendet werden.

Die modernen Methoden ergänzen eine ältere Generation von Methoden: Sie sind kurz und gut lesbar sowie direkt auf dem Element nutzbar und werden von allen modernen Browsern unterstützt.

before ist die modernere Variante von insertBefore und für einen oder mehrere Elemente oder Textknoten vor einem Element ein. Dafür muss before nicht mehr das Eltern-Element identifizieren, so dass der Aufruf von before deutlich einfacher ist.