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

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

Esempio

Creiamo un paragrafo e posizioniamolo prima del secondo paragrafo:

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

Risultato dell'esecuzione del codice:

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

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

Risultato dell'esecuzione del codice:

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

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

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

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

parent.insertBefore(p, parent.firstChild);

Risultato dell'esecuzione del codice:

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

Vedi anche

metodo prepend,
che inserisce elementi all'inizio
metodo appendChild,
che inserisce elementi alla fine del genitore
metodo insertAdjacentElement,
che inserisce un elemento in una posizione specificata
metodo insertAdjacentHTML,
che inserisce tag in una posizione specificata