Metode insertBefore

Metode insertBefore ļauj ievietot elementu pirms cita elementa. Visbiežāk tiek izmantota pēc elementa izveides ar createElement. Metode tiek piemērota tā elementa vecākam, pirms kura notiks ievietošana.

Sintakse

javascriptvecāks.insertBefore(elements, pirms kā ievietot);

Piemērs

Izveidosim rindkopu un ievietosim to pirms otrās rindkopas:

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);

Koda izpildes rezultāts:

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

Piemērs

Pievienosim rindkopu elementa #parent sākumā. Lai to izdarītu, ievietosim mūsu rindkopu pirmā #parent pēcteča priekšā. Šo pēcteci var atrast, izmantojot 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);

Koda izpildes rezultāts:

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

Piemērs

Kad otrais parametrs ir null, metode insertBefore darbojas kā appendChild. Tajā pašā laikā, ja elementam nav pakārtoto elementu, firstElementChild atgriež null. Tāpēc var pievienot elementa sākumā pat tad, ja tam nav pakārtotu elementu:

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

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

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

parent.insertBefore(p, parent.firstChild);

Koda izpildes rezultāts:

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

Skatiet arī