Javascript appendChild () – Element in das DOM einbinden

Append Child Element als letztes Elements anhängen

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.

Wenn das Element nicht vom alten Eltern-Element entfernt, sondern eine Kopie an einen weiteren Knoten erstellt werden werden soll, erzeugt cloneNode die Kopie des Elements.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Neues Element ins DOM einfügen, umhängen, kopieren

In der Browser-Console 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:

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

Ein Element, das bereits im DOM eingebunden ist, und jetzt durch appendChild an einen anderen Knoten gehangen wird, muss nicht von seinem alten Eltern-Element entfernt werden. appendChild entfernt das Element automatisch vom alten Eltern-Element, wenn es an eine neue Stelle gehangen wird.

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() {
   const fixed = document.getElementById('fix');
   const newP = document.createElement('p');
   const 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.

parent reference oldchild oldchild newchild parent newchild oldchild oldchild oldchild