insertBefore metodas

insertBefore metodas leidžia įterpti elementą prieš kitą elementą. Dažniausiai naudojamas sukūrus elementą su createElement pagalba. Metodas taikomas to elemento tėvui, prieš kurį įvyks įterpimas.

Sintaksė

tėvas.insertBefore(elementas, prieš ką įterpti);

Pavyzdys

Sukurkime pastraipą ir patalpinkime ją prieš antrą pastraipą:

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

Kodo vykdymo rezultatas:

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

Pavyzdys

Pridėkime pastraipą į #parent elemento pradžią. Tam įtersime savo pastraipą prieš pirmąjį #parent palikuonį. Šį palikuonį galima rasti naudojant 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);

Kodo vykdymo rezultatas:

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

Pavyzdys

Perduodant antruoju parametru null metodas insertBefore veikia kaip appendChild. Tuo pačiu metu, jei elemente nėra antrinių elementų, firstElementChild grąžina null. Vadinasi, pridėti į elemento pradžią galima net tada, kai jame nėra antrinių elementų:

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

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

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

parent.insertBefore(p, parent.firstChild);

Kodo vykdymo rezultatas:

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

Taip pat žiūrėkite

metodas prepend,
kuris įterpia elementus į pradžią
metodas appendChild,
kuris įterpia elementus į tėvo pabaigą
metodas insertAdjacentElement,
kuris įterpia elementą į nurodytą vietą
metodas insertAdjacentHTML,
kuris įterpia žymes į nurodytą vietą