Método insertBefore() do HTML DOM

Objeto Elemento do HTML DOM

insertBefore()O método é usado para inserir um subnó de forma a que este esteja antes do nó subordinado existente especificado.

Se o subobjeto fornecido é uma referência a um nó existente no documento, o insertBefore() move-o da sua posição atual para a nova posição (veja os exemplos a seguir).

Usoappendchild()O método adiciona um nó ao final da lista de nós filhos do nó pai especificado.

Sintaxe:

node.insertBefore(newNode, existingNode)

var newElem = document.createElement("h"3");　　//　Criar um novo h3Elemento
var newContent = document.createTextNode("Hi there");　　//　Criar alguns conteúdos de texto
newElem.appendChild(newContent);　　//　Adicionar um nó de texto ao novo h criado3
var body = document.body;　　//　Obter o BODY
body.insertBefore(newElem, body.childNodes[0]);　//　Inserir H no primeiro filho do BODY3

Atenção:Se você deseja criar um novo elemento com texto, lembre-se de criar o texto como nó Text, então anexá-lo ao elemento, e em seguida, anexar o elemento ao documento.

Compatibilidade do navegador

Todos os navegadores suportam completamente o método insertBefore():

Valor do parâmetro

Detalhes técnicos

Mais exemplos

Criar um elemento <p> e inseri-lo no elemento <div>:

var para = document.createElement("p");　　　//　Criar um nó <p>
var txt = document.createTextNode("Este é um parágrafo.");//　Criar um nó de texto
para.appendChild(txt);//　Adicionar texto ao <p>
var div = document.getElementById("demo");//　Obter o DIV com "id=demo"
div.insertBefore(para, div.childNodes[0]);//　Inserir um nó P antes do primeiro filho do DIV

Este exemplo move um elemento da sua posição atual para uma nova posição:

var elem = document.getElementById("myList2").lastElementChild;
var list1　= document.getElementById("myList1");
list1.insertBefore(elem, list1.childNodes[0]);

Referências Relacionadas

Referência do HTML DOM:nodeMétodo .hasChildNodes()

Referência do HTML DOM:nodeMétodo .appendChild()

Referência do HTML DOM:nodeMétodo .removeChild()

Referência do HTML DOM:nodeMétodo .replaceChild()

Referência do HTML DOM:Método document.createElement()

Referência do HTML DOM:Método document.createTextNode()

Referência do HTML DOM:Método document.adoptNode()

Referência do HTML DOM:Método document.importNode()

Objeto Elemento do HTML DOM