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

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

Przykład

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

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

Wynik wykonania kodu:

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

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

Wynik wykonania kodu:

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

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

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

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

parent.insertBefore(p, parent.firstChild);

Wynik wykonania kodu:

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

Zobacz też