Javascript appendChild ()

Append Child Element als letztes Elements einfügen append Child und insert Before – Elemente am Ende bzw. am Anfang einfügen

Javascript appendChild fügt Elemente an das Ende eines Fragments (Teilbaums) ein. appendChild braucht mehr Anweisungen als innerHTML und ist oft auch langsamer als innerHTML, aber beim Einfügen eines Elements mit appendChild bleiben alle Event Handler des Elements intakt.

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:

let images = ['bird1.png','bird2.png','bird3.png'];
images.forEach (function (value, index) {
   let 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() {
   let fixed = document.getElementById('fix');
   let newP = document.createElement('p');
   let newText = document.createTextNode('Neuer Absatz');
   fixed.appendChild(newP);
   newP.appendChild(newText);
}
bodyheadermainh2pdivpNeuer Absatz
  • let fixed = document.getElementById('fix'); findet das Element mit dem id-Attribut 'fix' und setzt die Variable fixed als Referenz auf das Objekt.
  • let newP = document.createElement('p'); erzeugt einen neuen Elementknoten vom Typ p.
  • let 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.

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