Metoda insertBefore

Metoda insertBefore umożliwia wstawienie elementu przed innym elementem. Najczęściej używana jest po utworzeniu elementu za pomocą createElement. Metoda jest stosowana do rodzica elementu, przed którym nastąpi wstawienie.

Składnia

rodzic.insertBefore(element, przed kim wstawić);

Przykład

Utwórzmy akapit i umieśćmy go przed drugim akapitem:

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

Wynik wykonania kodu:

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

Przykład

Dodajmy akapit na początek elementu #parent. Aby to zrobić, wstawmy nasz akapit przed pierwszym potomkiem #parent. Tego potomka można znaleźć za pomocą 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);

Wynik wykonania kodu:

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

Przykład

Przy przekazaniu drugiego parametru jako null metoda insertBefore działa jak appendChild. Jednocześnie, jeśli element nie ma elementów potomnych, firstElementChild zwraca null. W konsekwencji, dodawanie na początek elementu jest możliwe nawet wtedy, gdy nie ma on elementów potomnych:

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

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

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

parent.insertBefore(p, parent.firstChild);

Wynik wykonania kodu:

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

Zobacz też

metoda prepend,
która wstawia elementy na początek
metoda appendChild,
która wstawia elementy na koniec rodzica
metoda insertAdjacentElement,
która wstawia element w określone miejsce
metoda insertAdjacentHTML,
która wstawia znaczniki w określone miejsce