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ă

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

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

Rezultatul executării codului:

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

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

Rezultatul executării codului:

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

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

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

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

parent.insertBefore(p, parent.firstChild);

Rezultatul executării codului:

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

Vezi și