insertBefore Metode

Die insertBefore metode laat jou toe om 'n element voor 'n ander element te plaas. Dit word meestal gebruik nadat 'n element geskep is met createElement. Die metode word toegepas op die ouer van die element waarvoor die plasing sal plaasvind.

Sintaksis

javascriptouer.insertBefore(element, voor wie om te plaas);

Voorbeeld

Laat ons 'n paragraaf skep en dit voor die tweede paragraaf plaas:

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 kode-uitvoering:

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

Voorbeeld

Kom ons voeg 'n paragraaf aan die begin van element #parent by. Om dit te doen, plaas ons ons paragraaf voor die eerste nakomeling van #parent. Hierdie nakomeling kan gevind word 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 kode-uitvoering:

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

Voorbeeld

Wanneer die tweede parameter null oorgedra word, werk die insertBefore metode soos appendChild. Terselfdertyd, as die element geen kindelemente het nie, retourneer firstElementChild null. Gevolglik kan 'n mens by die begin van 'n element byvoeg selfs wanneer dit geen kindelemente het nie:

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

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

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

parent.insertBefore(p, parent.firstChild);

Resultaat van kode-uitvoering:

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

Sien ook