Javascript insertBefore()

Elemente mit Javascript einfügen

In der Konsole sehen wir neu eingefügte Elemente im Quelltext, gleich, ob sie mit createElement oder innerHTML erzeugt und eingesetzt wurden. Der Browser kann sie mit CSS versorgen und parst die Elemente, so das Scripte über das DOM auf sie zugreifen können.

let inserted = reference.parentElement.insertBefore (newChild, reference);

insertBefore () ist eine alte DOM-Methode. Die modernen Browser unterstützen before und after, um Elemente ohne Umwege über das Parent-Element zu ersetzen. Wer auf IE verzichten kann:

const p1 = document.createElement ("p");
const p2 = document.createElement ("p");

reference.before (p1, "text1", p2, "text2");

insertBefore ()

appendChild () ist schnell und einfach, wenn Inhalte am Ende eines Elements eingefügt werden. Javascript insertBefore () funktioniert ähnlich wie appendChild (), aber insertBefore () platziert ein Element an jede beliebige Position im Dokument. Wenn das Element bereits im DOM eingehangen ist, wird es an die neue Stelle gesetzt und von seiner alten Position entfernt.

insertBefore () macht einen Umweg über parentNode bzw parentElement (sicherer, ab IE9).

reference.parentElement.insertBefore ( newchild, reference ) fügt unterhalb von parentElement einen Knoten newchild vor reference ein.

<div>       <---------------+-- parentNode
    <div> … </div>          |
    <figure> … </figure>    |
    <div> … </div>          |
</div>      <---------------+

const  heading = document.createElement('h3');
const  figure = document.querySelector ('figure');
figure.parentNode.insertBefore( heading, figure);

Ist der zweite Parameter beim Aufruf null, fügt insertBefore (elem, null) das Element am Ende der Liste der Kind-Knoten des Parent-Elements ein.

insertBefore, insertAfter: Elemente einfügen

Mindestens ebenso oft wie das Einfügen neuer Elemente vor einem vorhandenen Element ist das Einfügen eines Knotens nach einem Element gefragt – aber die passenden Javascript-Funktionen node.before () und node.after () wurde von IE10, IE11 und lange auch von Microsoft Edge nicht unterstützt. insertBehind simmuliert die fehlende Methode mit der Hilfe von nextSibling.

Das Script nutzt nextSibling als Punkt zum Einhängen des neuen Elements. Falls kein nextSibling existiert, darf der Knoten ohne jegliches Federlesen als letztes Kind an den Elternknoten gehangen werden: node.parentNode.appendChild();.

"use strict";
document.querySelector('button').onclick = function () {
	const  figure = document.querySelector('.demohase');
	const  caption = document.createElement ('p');
	caption.innerHTML = "Kein Igel in Sicht?";
	if (figure.nextSibling) {
		figure.parentNode.insertBefore( caption, figure.nextSibling);
	} else {
		figure.parentNode.appendChild(caption);
	}
}

Wenn alte Browser wie IE11 nicht mehr beachtet werden müssen, sind die DOM-Methoden before und after einfacher, denn sie erfordern keinen Umweg über ein Parent-Element und sind daher weniger fehleranfällig.

before, after

Wenn IE11 außer Acht gelassen werden kann, gibt es bequemere Methoden. element.before, element.after, replaceWith, prepend und append sind mit ES6 angekommen und jQuery-Methoden nachempfunden und verzichten auf das fehleranfällige Einfädeln über den parentNode.