Método HTML DOM insertBefore()
Exemplo
Insira um novo elemento <li> antes do primeiro elemento filho de um elemento <ul>:
var newItem = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
newItem.appendChild(textnode); // Append the text to <li>
var list = document.getElementById("myList"); // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]); // Insert <li> before the first child of <ul>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O método insertBefore() insere um nó como filho, logo antes de um filho existente, que você especifica.
Dica: Se você deseja criar um novo item de lista, com texto, lembre-se de criar o texto como um nó de Texto que você anexa ao elemento <li> e, em seguida , insira <li> na lista.
Você também pode usar o método insertBefore para inserir/mover um elemento existente (consulte "Mais exemplos").
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.
Method | |||||
---|---|---|---|---|---|
insertBefore() | Yes | Yes | Yes | Yes | Yes |
Sintaxe
node.insertBefore(newnode, existingnode)
Valores de parâmetro
Parameter | Type | Description |
---|---|---|
newnode | Node object | Required. The node object you want to insert |
existingnode | Node object | Required. The child node you want to insert the new node before. If set to
null , the insertBefore method will insert the newnode at the end |
Detalhes técnicos
Valor de retorno: | Um objeto Node, representando o nó inserido |
---|---|
Versão DOM | Objeto de nó de nível 1 principal |
Mais exemplos
Exemplo
Mova um elemento <li> de uma lista para outra:
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);