Exemplo
Insira um novo <li> elemento antes do primeiro elemento filho de um <ul> elemento:
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>Antes de inserir:
- Coffee
- Tea
Após a inserção:
- Water
- Coffee
- Tea
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
O insertBefore() método insere um nó como um filho, logo antes de um filho existente, que você especificar.
Dica: Se você quiser criar um novo item da lista, com texto, lembre-se de criar o texto como um nó de texto que você acrescentar ao <li> elemento, em seguida, insira <li> à lista.
Você também pode usar o método insertBefore para inserir / mover um elemento existente (See "More Examples") .
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| insertBefore() | sim | sim | sim | sim | sim |
Sintaxe
Os valores dos parâmetros Parâmetro Tipo Descrição newnode Node object Requeridos. O objeto node que deseja inserir existingnode Node object Opcional. O nó filho que deseja inserir o novo nó antes. Quando não especificado, o método insertBefore irá inserir o newNode na extremidade
Detalhes técnicos
Valor de retorno: Um objecto do nó, que representa o nó inserido DOM Versão Núcleo Nível Objeto 1 Node
mais Exemplos
Exemplo
Mover um <li> elemento de uma lista para outra:
var node = document.getElementById("myList2").lastChild;
var
list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]); Antes de inserir:
- Coffee
- Tea
- Water
- Milk
Depois insertBefore:
- Milk
- Coffee
- Tea
- Water
Tente você mesmo "