CSS, HTML und Javascript mit {stil}

Javascript replaceChild, removeChild

DOM-Elemente entfernen, löschen und ersetzen

Javascript replaceChild, removeChild, appendChild und insertBefore ändern die Struktur des DOM: Sie operieren auf Elementen (nodes), 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.

<figure id="figure" style="background: wheat;">
   <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>
</figure>
…
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: myNode.parentNode.removeChild(birds);. Damit ein erneuter Aufruf nicht zu einem Skriptfehler führt, weil der Knoten mit der id birds nicht mehr gefunden wird, prüft die erste Anweisung, ob der Knoten mit der id birds existiert (if (document.getElementById('birds'))).

replaceChild appendChild removeChild insertBehind