CSS, HTML und Javascript mit {stil}

Javascript insertBefore()

Javascript insertBefore : Element einfügen Tetris-Bausteine einfügen

insertBefore fügt Elemente an einer beliebigen Stelle des Dokuments ein.

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.

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.

var 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.

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>      <---------------+

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

Es gibt kein insertBehind oder insertAfter

Mindestens ebenso oft wie das Einfügen neuer Knoten vor einem vorhandenen Knoten ist das Einfügen eines Knotens nach einem Element gefragt – aber eine passende Javascript-Funktion gibt es dafür nicht. 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 () {
	var figure = document.querySelector('.demohase');
	var caption = document.createElement ('p');
	caption.innerHTML = "Kein Igel in Sicht?";
	if (figure.nextSibling) {
		figure.parentNode.insertBefore( caption, figure.nextSibling);
	} else {
		figure.parentNode.appendChild(caption);
	}
}
Insertbefore parent reference oldchild oldchild newchild parent newchild oldchild oldchild oldchild