Javascript append / prepend – Elemente im DOM einfügen

append () – Anhängen

Die Methode parent.append (val [, val]) fügt eine Liste von Komma-getrennten DOMString-Objekten oder Node-Objekten hinter das letzte Element des Elternknotens parent. DOMString-Objekte werden als Textknoten eingefügt.

In Content Management Systemen, in Shops und Galerien eine wiederkehrende Aufgabe: eine Liste mit Informationen aus der Server-Anwendung in die Webseite einsetzen. lamps ist ein JSON-Array mit Bild-Adressen.

<ul class="reference"></ul>

const lamps = [
	{"url": "lamp1.webp", "caption": "Weißer Lampenschirm"},
	{"url": "lamp2.webp", "caption": "Roter Lampenschirm"},
	{"url": "lamp3.webp", "caption": "Weißer Lampenschirm"}
];

const list = [];

function createLamp (lamp) {
	const li = document.createElement ("li");
	const img = document.createElement ("img");
	img.src = lamp.url;
	img.alt = lamp.caption;
	li.append (img);
	return li;
}
lamps.forEach ((lamp) => {
	const li = createLamp (lamp);
	list.unshift (li);
});

document.querySelector (".reference").append (...list);
console.log ("reference", document.querySelector (".reference"));

Das Array list nimmt die von createLamp erzeugten li-Elementen auf. list.unshift (li) fügt Elemente am Anfang des Arrays ein, um die Reihenfolge der Elemente aus dem JSON-Array zu erhalten.

Die forEach-Iteration setzt nicht jedes erzeugte Element direkt in die Liste, sondern erst append (...list) fügt die Elemente am Ende des Skripts mittels spread-Operator in einem Schwung ein.

Während die alten Methoden appendChild und insertBefore nur jeweils ein einzelnes Objekt einfügen können und das eingefügte Node-Objekt zurückgeben, hat append() keinen Rückgabewert. Event Handler eines eingefügten Elements bleiben genauso wie bei appendChild intakt.

append ()–Beispiel: Template für die Navigation

Das Script hängt eine Navigationsliste in ein Element ein. Die Navigationsliste ist ein Array, so dass ein Eintrag reicht, um weitere Elemente einzuhängen oder zu löschen.

<div class="nav"></div>

const navexample = document.querySelector(".nav")
const ul = document.createElement ("ul");
const elems = [
    '<a href="template.html">Javascript Templates</a>',
    '<a href="DOM-Manipulation.html">removeChild, replaceChild</a>',
    '<a href="get-attribute.html">Javascript getAttribute</a>'
];
let nodes = elems.map (elems => {
    const li = document.createElement ("li");
    li.innerHTML = elems;
    return li;
});

ul.append(...nodes);
navexample.append (ul);
console.log ("navexample", navexample);

▼ navexample 
	▼ <div class="nav">
		▼ <ul>
			▼ <li>
				<a href="/javascript/template.html">Javascript Templates</a>
			  </li>
			  <li>…</li>
			  <li>…</li>
		  </ul>
	  </div>

Die drei Punkte der Anweisung ul.append(...nodes) werden als Spread-Operator (Verbreiten-Operator) bezeichnet. In einem Array verbreitet sich der Spread-Operator über Indizes und Werte. map () filtert eventuell duplizierte Werte aus dem Array.

Wird das mit append / prepend eingefügte Objekt in ein anderes Element umgehangen, muss es nicht erst entfernt werden, das besorgen append und prepend schon automatisch.

document.querySelector("section").prepend(nav);

Die Anweisung entfernt das Element von seiner aktuellen Position im DOM und hängt es mitsamt seinen Event Handlern an die neue Position.

prepend: Voranstellen

Die Methode prepend () fügt Node-Objekte oder Strings vor dem ersten Kindknoten eines Elternknotens bzw. Fragments ein.

<div class="list"></div>

const emoji = ["🐊", "🐇", "🐁", "🐌"];
document.querySelector(".list").prepend (
	"[", emoji, "]"
);

Hier gilt das Gleiche wie bei append (): prepend hängt nicht nur Node für Node ein, sondern eine Komma-getrennte Liste von Objekten oder Strings. In diesem Beispiel wird ein komplettes Array eingefügt.

Weitere Methoden zum Einfügen von Elementen

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.

remove, replace-with

Elemente einhängen, Elemente aus dem Dom entfernen? remove entfernt ein Element, replaceWith ersetzt oder überschreibt ein Element durch andere Elemente, .