Javascript insertBefore()

Javascript insertBefore – einfügen

insertBefore fügt Elemente an einer beliebigen Stelle des Dokuments ein und macht dabei einen Umweg über parentNode bzw parentElement.

Das Nachladen von Bildern oder ganzen Blöcken mit Inhalt sorgt für schnelle Ladezeiten von Webseiten. Ob die Daten mit JSON geholt werden oder aus der Datenbank kommen: Wenn sie als Elementknoten in die HTML-Seite eingebunden werden, sind die nachgeladenen Daten vollwertige Objekte des DOM.

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

Elemente mit Javascript einfügen

In der Konsole sehen wir neue Elemente im Quelltext. Das ist der Unterschied zum Einfügen mit innerHTML: innerHTML kann zwar HTML-Tags einsetzen, die vom Browser auch mit CSS versorgt werden, aber im DOM existieren diese Elemente nicht.

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

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);
Bild mit Javascript einfügen

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 Knoten vor einem vorhandenen Knoten ist das Einfügen eines Knotens nach einem Element gefragt – aber die passenden Javascript-Funktionen node . before () und node . after () werden von IE10, IE11 und 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);
	}
}

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.

parent reference oldchild oldchild newchild parent newchild oldchild oldchild oldchild