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

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

Voorbeeld

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

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

javascriptlet 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:

html<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:

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

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

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

parent.insertBefore(p, parent.firstElementChild);

Resultaat van de code-uitvoering:

html<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:

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

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

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

parent.insertBefore(p, parent.firstChild);

Resultaat van de code-uitvoering:

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

Zie ook