De insertBefore methode

De methode insertBefore maakt het mogelijk om een element vóór een ander element in te voegen. Meestal wordt het gebruikt na het creëren van een element met createElement. De methode wordt toegepast op de ouder van het element waarvóór de invoeging plaatsvindt.

Syntaxis

ouder.insertBefore(element, voor wie in te voegen);

Voorbeeld

Laten we een paragraaf creëren en deze plaatsen vóór de tweede paragraaf:

<div id="parent">
	<p>elem 1</p>
	<p id="before">elem 2</p>
	<p>elem 3</p>
</div>

let parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

Resultaat van de code-uitvoering:

<div id="parent">
	<p>elem 1</p>
	<p>!</p>
	<p>elem 2</p>
	<p>elem 3</p>
</div>

Voorbeeld

Laten we een paragraaf toevoegen aan het begin van het element #parent. Om dit te doen, voegen we onze paragraaf in vóór de eerste nakomeling van #parent. Deze nakomeling kan gevonden worden met firstElementChild:

<div id="parent">
	<p>elem 1</p>
	<p>elem 2</p>
</div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

Resultaat van de code-uitvoering:

<div id="parent">
	<p>!</p>
	<p>elem 1</p>
	<p>elem 2</p>
</div>

Voorbeeld

Bij het doorgeven van de tweede parameter als null werkt de methode insertBefore als appendChild. Tegelijkertijd, als het element geen child elementen heeft, retourneert firstElementChild null. Bijgevolg kan toevoegen aan het begin van een element zelfs dan plaatsvinden, wanneer het geen child elementen bevat:

<div id="parent"></div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

Resultaat van de code-uitvoering:

<div id="parent">
	<p>!</p>
</div>

Zie ook

methode prepend,
die elementen aan het begin invoegt
methode appendChild,
die elementen aan het einde van de ouder invoegt
methode insertAdjacentElement,
die een element op een opgegeven plaats invoegt
methode insertAdjacentHTML,
die tags op een opgegeven plaats invoegt