Metoda insertBefore

Metoda insertBefore permite inserarea unui element înaintea altui element. Cel mai des este folosită după crearea elementului cu ajutorul createElement. Metoda se aplică părintelui acelui element, înaintea căruia se face inserarea.

Sintaxă

părinte.insertBefore(element, înaintea cui să se insereze);

Exemplu

Să creăm un paragraf și să-l plasăm înaintea celui de-al doilea paragraf:

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

Rezultatul executării codului:

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

Exemplu

Să adăugăm un paragraf la începutul elementului #parent. Pentru aceasta, vom insera paragraful nostru înaintea primului copil #parent. Acest copil poate fi găsit cu 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);

Rezultatul executării codului:

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

Exemplu

La transmiterea celui de-al doilea parametru ca null, metoda insertBefore acționează ca appendChild. În același timp, dacă în element nu există elemente copii, firstElementChild returnează null. Prin urmare, se poate adăuga la începutul elementului chiar și atunci când în el nu există elemente copii:

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

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

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

parent.insertBefore(p, parent.firstChild);

Rezultatul executării codului:

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

Vezi și

metoda prepend,
care inserează elemente la început
metoda appendChild,
care inserează elemente la sfârșitul părintelui
metoda insertAdjacentElement,
care inserează un element în locul specificat
metoda insertAdjacentHTML,
care inserează tag-uri în locul specificat