Javascript replaceChild, removeChild, remove

Element entfernen oder Element löschen mit remove oder removeChild und Element ersetzen mit replaceChild

removeChild () und replaceChild () löschen bzw. ersetzen Elemente bzw. ganze Fragmente. Ein ersetztes Element wird automatisch gelöscht.

Genauso wie appendChild und insertBefore ändern sie die Struktur des DOM: Sie fügen Elemente in das Dokument ein, kopieren Knoten und entfernen ganze Äste aus dem DOM-Baum.

Das Nachladen von Bildern oder ganzen Blöcken mit Inhalt sorgt für schnelle Ladezeiten von Webseiten. Ob die Daten mit JSON geholt werden oder aus der Datenbank kommen: Wenn sie als Elementknoten in die HTML-Seite eingebunden werden, sind die nachgeladenen Daten vollwertige Objekte des DOM.

In der Konsole sehen wir neue Nodes im Quelltext. Das ist der Unterschied zum Einfügen mit innerHTML: innerHTML kann zwar HTML-Tags einsetzen, die vom Browser auch mit CSS versorgt werden, aber im DOM existieren diese Elemente nicht.

replaceChild()

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 oder kann ein neu erzeugter Knoten sein.

  • Montag
  • Dienstag
  • Mittwoch
<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);.

var old = document.querySelector('#aList');
var new = document.createElement('p');
var 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.

removeChild()

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.

HTML
<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>
Javascript
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.

oldNode = elem.removeChild(node)

Wenn das Element aus dem DOM entfernt, aber später weiter zur Verfügung stehen soll, wird es beim Entfernen einer Referenz zugewiesen.

Anstelle von birds.parentNode.removeChild(birds):

oldNode = birds.parentNode.removeChild(birds);

dann kann das gelöschte Element später erneut in das DOM eingefügt werden.

document.querySelector("#newpos").appendChild(oldNode);

elem.remove ()

Die einfachste Art, ein Element zu löschen, ist elem.remove ();

Klick!
document.getElementById("blue").onclick = function () {
    this.remove ();
}

Das einfache remove () braucht nur eine Referenz auf das Element, während removeChild eine Referenz sowohl auf das Element als auch auf das Parent Element braucht. Das Ergebnis der Methode ist in beiden Fällen dasselbe.

removeChild und replaceChild sind alte und zuverlässige Methoden, aber remove () wird von IE11 noch nicht unterstützt.

replaceChild appendChild removeChild insertBehind