Javascript appendChild () – Element in das DOM einbinden

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

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.

In der Browser-Console sehen wir die neuen Elemente im Quelltext. Das ist der Unterschied zum Einfügen mit innerHTML: appendChild() erwartet ein Node-Objekt, innerHTML hingegen einen String, der auch HTML-Elemente enthalten kann.

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);

Ein Bilder mit new Image() und appendChild() nachladen, das von einer dynamischen Anwendung auf dem Server als Antwort auf einen User-Request geliefert wurde:

const images = ['img/bird1.png','img/bird2.png','img/bird3.png'];
images.forEach ((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.

Tipp: Mit dem Hinscheiden von IE sind append() und prepend() als modernere Varianten effizienter als appendChild. Diese jüngeren Methoden fügen auch gleich mehrere Objekte oder Textstrings am Ende bzw. Anfang eines Elements ein.

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.

const fixed = document.getElementById('fix');
	const newP = document.createElement('p');
	const newText = document.createTextNode('Neuer Absatz');
	newP.appendChild(newText);
	fixed.appendChild(newP);
	fixed.style.cssText = "color: blue";
	console.log ("fixed", fixed);

▼ fixed 
	▼ <div id="fix" style="color: blue;">
		<p>Neuer Absatz</p>
	</div>

• 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.

Elemente als childNode oder Sibling einfügen

Gut ein halbes Dutzend Methoden fügt Elemente in das Dokument ein – als childNode unterhalb eines Elements oder als Sibling auf derselben Ebene wie ein Element.