Método insertBefore() do Elemento DOM HTML

Definição e uso

insertBefore() O método insere um nó filho antes do nó filho existente.

Veja também：

Método appendChild()

Método replaceChild()

Método removeChild()

Método remove()

Atributo childNodes

Atributo firstChild

Atributo lastChild

Atributo firstElementChild

Atributo lastElementChild

Exemplo

Exemplo 1

  1. Criar um elemento <li>
  2. Criar um nó de texto
  3. Anexar o texto ao elemento <li>
  4. Inserir o elemento <li> antes do primeiro elemento filho de <ul>：
const newNode = document.createElement("li");
const textNode = document.createTextNode("Água");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Experimente você mesmo

Exemplo 2

Mover o último elemento de uma lista para o início de outra lista:

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

Experimente você mesmo

Exemplo 3

Mover o último elemento de uma lista para o final de outra lista:

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

Experimente você mesmo

Sintaxe

element.insertBefore(newnode, existingnode)

ou

node.insertBefore(newnode, existingnode)

Parâmetros

Parâmetros Descrição
newnode Obrigatório. O nó a ser inserido (elemento).
existingnode

Opcional. Insira um nó filho antes do nó novo.

Se não for especificado, o método insertBefore inserirá newnode no final.

Retorno

Tipo Descrição
Nó O nó inserido.

Suporte do navegador

element.insertBefore() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam completamente:

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