append() / prepend() – Am Ende / Anfang eines Containers einfügen

append () – Anhängen

parent.append (val, val, …) fügt eine Liste von Komma-getrennten Elementen hinter das letzte Element des Elternknotens parent ein. Strings werden als Textknoten eingefügt, Elemente als Nodes.

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 reference = document.querySelector(".reference");

function createLamp({ url, caption }) {
	const li = document.createElement("li");
	const img = new Image();
	img.src = url;
	img.alt = caption;
	li.append(img);
	return li;
}

// Reihenfolge umdrehen
reference.append(
	...lamps
		.map(createLamp)
		.reverse()
);

console.log("reference", reference);

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="before.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, .