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

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

Piemērs

Izveidosim rindkopu un ievietosim to pirms otrās rindkopas:

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

Koda izpildes rezultāts:

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

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

Koda izpildes rezultāts:

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

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

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

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

parent.insertBefore(p, parent.firstChild);

Koda izpildes rezultāts:

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

Skatiet arī

metode prepend,
kas ievieto elementus sākumā
metode appendChild,
kas ievieto elementus vecāka beigās
metode insertAdjacentElement,
kas ievieto elementu noteiktā vietā
metode insertAdjacentHTML,
kas ievieto atzīmes noteiktā vietā