Javascript insertBefore()

Javascript insertBefore, insert before : Element einfügen Tetris-Bausteine 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.

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.

ensertBefore () 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>      <---------------+

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

insert before, insert after

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 () {
	let  figure = document.querySelector('.demohase');
	let  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