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.
remove, replace-with
Elemente einhängen, Elemente aus dem Dom entfernen? remove entfernt ein Element, replaceWith ersetzt oder überschreibt ein Element durch andere Elemente, .