Metodo insertBefore() dell'elemento HTML DOM

Definizione e uso

insertBefore() Il metodo inserisce un figlio prima dell'elemento figlio esistente.

Vedi anche:

Metodo appendChild()

Metodo replaceChild()

Metodo removeChild()

Metodo remove()

Proprietà childNodes

Proprietà firstChild

Proprietà lastChild

Proprietà firstElementChild

Proprietà lastElementChild

Esempio

Esempio 1

  1. Crea un elemento <li>
  2. Crea un nodo di testo
  3. Aggiungi il testo all'elemento <li>
  4. Inserisci l'elemento <li> prima del primo elemento figlio di <ul>
const newNode = document.createElement("li");
const textNode = document.createTextNode("Acqua");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Prova da solo

Esempio 2

Spostare l'ultimo elemento da una lista a un'altra all'inizio:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

Prova da solo

Esempio 3

Spostare l'ultimo elemento da una lista a un'altra alla fine:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

Prova da solo

Sintassi

element.insertBefore(newnode, existingnode)

o

node.insertBefore(newnode, existingnode)

Parametro

Parametro Descrizione
newnode Obbligatorio. Il nodo da inserire (elemento).
existingnode

Opzionale. Inserisce un nuovo nodo figlio prima del nodo esistente.

Se non è specificato, il metodo insertBefore inserisce newnode alla fine.

Valore di ritorno

Tipo Descrizione
Nodo Il nodo inserito.

Supporto del browser

element.insertBefore() È una caratteristica del DOM Level 1 (1998).

Tutti i browser supportano completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto