JavaScript/DOM/Node/replaceChild

Die Methode Node.replaceChild ersetzt aus Sicht eines Knotens einen seiner Kindknoten durch einen anderen.

Syntax

replacedNode = parentNode.replaceChild(newChild, oldChild);

• newChild ist der neue Knoten
• oldChild ist der zu ersetzende Knoten. Falls er bereits im DOM vorhanden ist, wird er zuerst von dort entfernt.
• replacedNode ist der ersetzte Knoten, also der selbe wie oldChild.

Anwendungsbeispiel

Beispiel ansehen …

    function andereAntwort () {
      var textknoten = document.createTextNode('Du darfst!'),
          zelle = document.getElementById("zelle2");
      zelle.replaceChild(textknoten, zelle.firstChild);
    }

Das Beispiel enthält eine Tabelle mit zwei Zellen. Unterhalb der Tabelle ist ein Verweis notiert. Beim Anklicken des Verweises wird die Funktion andereAntwort() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erzeugt zunächst mit document.createTextNode() einen neuen Textknoten für die Antwort. Die Antwort wird in Form eines Knotenobjekts benötigt, weil die Methode replaceChild() sowohl den neuen Knoten als auch den zu ersetzenden in Form eines Knotenobjekts erwartet. Im Beispiel wird mit document.getElementById('zelle') auf die zweite Tabellenzelle zugegriffen, um deren Inhalt, also den Textknoten, der ihren Kindknoten darstellt, durch den neu erzeugten Textknoten zu ersetzen. Dazu wird replaceChild() angewendet. Als erster Parameter wird der neue Knoten übergeben, als zweiter der zu ersetzende. Der neue Knoten ist im Beispiel in der Variablen textknoten gespeichert. Auf den zu ersetzenden Knoten wird mit zelle.firstChild zugegriffen.

Weblinks

• W3C: replaceChild
• MDN: Node.replaceChild