Javascript insertAdjacentElement

insertAdjacent

insertAdjacent gibt es in drei Variationen:

Alle drei Methoden haben einen Parameter position , der die Position für das Einfügen bestimmt.

beforebegin

Fügt newElem direkt vor dem aktuellen Element (als previous sibling).

afterend

Fügt newElem direkt nach dem aktuellen Element ein (als next sibling).

afterbegin

Fügt newElem als erstes Kind des aktuellen Elements ein (als firstChild).

beforeend

Fügt newElem als letztes Kind des aktuellen Elements ein (als lastChild).

Der zweite Parameter ist das einzufügende Element.

elem.insertAdjacentElement(position, newElem);

// oder 

const inserted = elem.insertAdjacentElement(position, newElem);

insertAdjacentHTML: HTML-String an Position einfügen

insertAdjacentHTML fügt zusätzlichen Inhalt ein, aber berührt – anders als innerHTML – bereits existierende Elemente nicht.

<div class="demo">
	<button class="btn" id="addItems">Früchte hinzufügen</button>
	<ul id="list"></ul>
</div>

const list = document.querySelector("#list");
const addItems  = document.querySelector("#addItems");

addItems.addEventListener("click", () => {
	const items = ["🍋", "🍎", "🍒", "🍐"];

	items.forEach(item => {
		list.insertAdjacentHTML(
			"beforeend", 
			`<li class="fruit">${item}</li>`
		);
	});
});

Jeder Klick auf den Button fügt alle Früchte als li-Elemente am Ende der Liste ein. Jedes Element wird geparst und kann danach mit .querySelector(".fruit") gefunden oder mit CSS gestylt werden. Zwar könnte man auch innerHTML benutzen:

list.innerHTML += `<li>${item}</li>`;

Das überschreibt jedes Mal das gesamte HTML im Container, ist langsamer und verliert Event-Listener auf seinen Kind-Elementen.

Um nur den Text einzusetzen, nicht aber u.U. enthaltene Elemente zu überschreiben, müsste mit innerHTML der komplette Inhalt vor und nach dem zu einzusetzenden Text gesichert und erneut eingesetzt werden. elem.insertAdjacentHTML lässt vorhandene Elemente und Inhalte stehen und fügt nur neuen Inhalt – Text und HTML – hinzu.

elem.insertAdjacentHTML ist praktisch, um Chat-Nachrichten anzuhängen, Produktkarten im Shop dynamisch nachzuladen oder Tabellenzeilen aus JSON zu generieren.

insertAdjacentElement: DOM-Element an Position einfügen

insertAdjacentElement (position, elem) erwartet keinen String, sondern ein echtes DOM-Element, das z.B. mit document.createElement() erzeugt wird. Der Vorteil gegenüber insertAdjacentHTML (position, HTMLString): insertAdjacentElement ist typsicher. Eigenschaften wie .classList.add, .dataset, .textContent usw. können angewendet werden, bevor das Element in das DOM eingefügt wird.

<button id="bar">Bild anzeigen</button>

const bar = document.querySelector("#bar");
bar.addEventListener ("click", () => {
	const pict = document.createElement("img");
	pict.src = "flowers.webp";
	pict.width = "490";
	pict.height = "300";
	pict.classList = "Blumen";
	bar.insertAdjacentElement("afterend", pict);
});

Weitere Methoden zum Einfügen neuer Elemente

insertAdjacentElement () ist flexibel und präzise, aber auch komplex und stocksteif. Die modernen Browser unterstützen before, after, replaceWith, remove, um Elemente ohne Umwege über das Parent-Element als childNode einzufügen.

Auch wenn die Methoden before und after in vielen Fällen einfacher sind, können sie nicht immer alle Positionen abdecken. insertAdjacentElement ist präziser.

insertAdjacentHTML ist effizienter, wenn viele HTML-Elemente in einem Schritt einzufügen sind. Das gilt auch für insertAdjacentText, wenn einfacher Text an einer bestimmten Position eingefügt werden soll, ohne dass er als HTML interpretiert wird.

insertAdjacentHTML vs innerHTML vs textContent