CSS, HTML und Javascript mit {stil}

node.appendChild()

Append Child appendChild und insertBefore – Knoten am Ende bzw. am Anfang einfügen

Javascript appendChild fügt Elemente an das Ende eines Fragments (Teilbaums) ein.

In der Konsole sehen wir neue Elemente 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.

Javascript elem.appendChild(child) fügt dem Parent-Element elem ein Kind als childNode hinzu. Wenn elem schon Kinder hat, wird childNode hinter die vorhandenen Child-Elemente gehangen. Das Parent-Element muss ein Elementknoten sein, Textknoten können keine Kinder haben.

 +-- Parent           +-- neues Element
 |                    | 
elem.appendChild (newchild);

Bildern mit new Image() und appendChild() nachladen, damit die Seite beim Besucher schneller geladen wird:

var images = ['bird1.png','bird2.png','bird3.png'];
images.forEach (function (value, index) {
   var img = new Image();
   img.src = images[index];
   document.getElementById('parent').appendChild(img);
});

appendChild()

Objekte, die mit appendChild() in das DOM gebunden werden, sind vollwertige Objekte im DOM-Baum und können später über Javascript-Funktionen angesprochen werden. Das unterscheidet appendChild und replaceChild von der Funktion innerHTML.

<div id="fix">
</div>
function append() {
   var fixed = document.getElementById('fix');
   var newP = document.createElement('p');
   var newText = document.createTextNode('Neuer Absatz');
   fixed.appendChild(newP);
   newP.appendChild(newText);
}
bodyheadermainh2pdivpNeuer Absatz
  • var fixed = document.getElementById('fix'); findet das Element mit dem id-Attribut 'fix' und setzt die Variable fixed als Referenz auf das Objekt.
  • var newP = document.createElement('p'); erzeugt einen neuen Elementknoten vom Typ p.
  • var newText = document.createTextNode('Neuer Absatz'); erzeugt einen neuen Textknoten und setzt die Variable newText als Referenz auf den Textknoten.
  • fixed.appendChild(newP); fügt den Knoten newP als Kindknoten an den Knoten fixed an.
  • newP.appendChild(newText); fügt den Textknoten an den Knoten newP an.

Das Einfügen neuer Knoten mit appendChild() in den leeren Platzhalter <div id="fix"> ist einfach, aber Platzhalter sind Ballast für das Markup und was passiert, wenn ein Skript etwas mit vielen, vielleicht sogar dynamisch erzeugten Elementen anstellen soll?

Zudem hat sich das Skript darauf verlassen, dass der Platzhalter <div id="fix"> tatsächlich vorhanden ist – eine der vorrangigsten Fehlerquellen bei der Programmierung auf dem DOM: Wenn der Platzhalter nicht da ist, passiert beim Klick auf appendChild() nichts und nur eine neue Fehlermeldung füllt die Javascript-Konsole.

parent reference oldchild oldchild newchild parent newchild oldchild oldchild oldchild
APPEND CHILD