Javascript append / prepend – Elemente im DOM einbinden

Neue Objekte oder Strings in einhängen

Javascript append fügt neue Node-Objekte oder Strings an das Ende eines Fragments (Teilbaums) ein, prepend am Anfang eines Fragments. append und prepend wurden vom eleganten jQuery append/prepend inspiriert und sind einfacher als die alten umständlichen Methoden appendChild / insertBefore.

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

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.

Syntax
parentNode.append (val1, val2, val3);
const fruits = [
	{"img":"🍏", "name":"Apfel"},
	{"img":"🍌", "name":"Banane"},
	{"img":"🍒", "name":"Kirschen"}
];
for (const elem of fruits) {
	let header = document.createElement("h3");
	header.append(elem.name);
	let desc = document.createElement("p");
	desc.append (elem.img);
	document.querySelector(".list").append(header, desc);
}

Während die alten Methoden appendChild und prependChild 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.

const ul = document.createElement ("ul");
const elems = [
    '<li><a href="/">Home</a></li>', 
    '<li><a href="/compare">Graph / List</a></li>',
    '<li><a href="/pages">List Pages</a></li>'
]
let nodes = elems.map (elems => {
    const li = document.createElement ("li");
    li.innerHTML = elems;
    return li;
});
ul.append(...nodes);
document.querySelector ("nav").append (ul);

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.