JavaScript/DOM/Node/appendChild

Die Methode Node.appendChild hängt einen zuvor neu erzeugten Knoten in die bestehende Knotenstruktur ein, und zwar so, dass er als letztes Kindelement eines anzugebenden Knotens eingefügt wird.

Syntax

var kind = element.appendChild(kind);

• kind: Kindknoten, der angehängt wird

Anwendungsbeispiel

Beispiel ansehen …

function listeErstellen(){
  var element = document.getElementById('liste');
  while (element.firstChild) {
	element.removeChild(element.firstChild);
  }

  for (var i = 0; i < 10; i++) {
    var newLI = document.createElement('li');
    var liNummer = i + 1;
    var newLIText = document.createTextNode('Das ist Listeneintrag Nummer ' + liNummer);
    newLI.appendChild(newLIText);
    element.appendChild(newLI);
  }
}

Das Beispiel füllt eine nummerierte Liste automatisch mit Daten. Beim Klick auf den Button wird zuerst mit der Methode removeChild() das vorhandene Listenelement entfernt.

Anschließend ist eine for-Schleife notiert, die 10 mal durchlaufen wird. Bei jedem Schleifendurchgang wird zunächst mit document.createElement() ein neues Element vom Typ li erzeugt. Dann wird eine Variable liNummer auf einen Wert gesetzt, der um 1 höher ist als der des Schleifenzählers i. Diese Variable wird in der nachfolgenden Anweisung benutzt, bei der mit document.createTextNode() ein neuer Textknoten erzeugt wird.

Anschließend folgen – immer noch innerhalb der for-Schleife – zwei appendChild()-Aufrufe. Die erste der Anweisungen greift mit document.getElementById("Liste") auf das ol-Element zu und führt dazu, dass diesem ein neues Kindelement am Ende hinzugefügt wird. Angehängt wird der zuvor neu erzeugte Elementknoten newLI, der ja ein neues li-Element speichert. Beim zweiten Aufruf wird der Schleifenzähler i benutzt, um mit document.getElementsByTagName("li")[i] auf das gerade neu erzeugte li-Element zuzugreifen. Ihm wird mit appendChild() der zuvor erzeugte Textknoten als Kindelement hinzugefügt. Auf diese Weise füllt sich die Liste bei jedem Schleifendurchlauf um ein neues li-Element mitsamt Zeicheninhalt.

Beachten Sie: Es ist nicht sehr speichereffizient, bei jedem Schleifendurchlauf Variablen neu zu vereinbaren (var). Man vereinbart Variablen für gewöhnlich vor einer Schleife und nutzt sie dann darin. Hier wurde aus Gründen der Übersichtlichkeit anders verfahren.

Einfügen mehrerer Elemente

Wenn Sie ein Element mit appendChild in ein Dokument einfügen, muss der Browser das komplette DOM der Seite neu aufbauen, Elemente neu positionieren und rendern. Dies kann bei mehreren Elementen zu Geschwindigkeitseinbußen führen.

Empfehlung: Wenn Sie mehrere Elemente dynamisch erzeugen, erzeugen Sie erst die Kindelemente und fügen diese in das Elternelement ein, welches Sie dann mit appendChild() in das Dokument einhängen.

Wenn Sie mehrere Elemente als Geschwister (siblings) einhängen wollen, können Sie ein DocumentFragment erzeugen und dieses dann einhängen: document.createDocumentFragment();

Genauso sollten Sie mit Stil- und Klassenzuweisungen verfahren.

Weblinks

• W3C: appendChild
• MDN: Node.appendChild