De prepend methode

De methode prepend maakt het mogelijk om aan het begin van een element een ander element in te voegen. Als parameter accepteert de methode een element, meestal gemaakt via createElement, of een string. Het is mogelijk om meerdere elementen of strings tegelijk toe te voegen, door ze gescheiden door komma's op te sommen.

Syntaxis

javascriptouder.prepend(element of string);

Voorbeeld

Laten we een alinea maken, er tekst aan toewijzen en deze aan het begin van het blok #parent op de pagina plaatsen:

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

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

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

parent.prepend(p);

Resultaat van de uitgevoerde code:

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

Voorbeeld

Laten we meerdere alinea's tegelijk aan het begin van blok #parent plaatsen:

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

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

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.prepend(p1, p2);

Resultaat van de uitgevoerde code:

html<div id="parent">
  <p>b</p>
  <p>a</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Voorbeeld

Laten we een string gebruiken als parameter voor de methode:

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

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

Resultaat van de uitgevoerde code:

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

Zie ook