Metodo insertBefore

Il metodo insertBefore consente di inserire un elemento prima di un altro elemento. Viene utilizzato più spesso dopo aver creato un elemento con createElement. Il metodo viene applicato al genitore dell'elemento prima del quale avverrà l'inserimento.

Sintassi

javascriptgenitore.insertBefore(elemento, prima di chi inserire);

Esempio

Creiamo un paragrafo e posizioniamolo prima del secondo paragrafo:

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

Risultato dell'esecuzione del codice:

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

Esempio

Aggiungiamo un paragrafo all'inizio dell'elemento #parent. Per fare ciò, inseriamo il nostro paragrafo prima del primo figlio di #parent. Questo figlio può essere trovato usando 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);

Risultato dell'esecuzione del codice:

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

Esempio

Quando si passa come secondo parametro null, il metodo insertBefore funziona come appendChild. Allo stesso tempo, se l'elemento non ha elementi figli, firstElementChild restituisce null. Di conseguenza, è possibile aggiungere all'inizio di un elemento anche quando non ha elementi figli:

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

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

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

parent.insertBefore(p, parent.firstChild);

Risultato dell'esecuzione del codice:

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

Vedi anche