Método HTML DOM insertBefore()
Ejemplo
Inserte un nuevo elemento <li> antes del primer elemento secundario de un 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>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El método insertBefore() inserta un nodo como elemento secundario, justo antes de un elemento secundario existente, que usted especifique.
Sugerencia: si desea crear un nuevo elemento de la lista, con texto, recuerde crear el texto como un nodo de texto que agrega al elemento <li> y luego inserta <li> en la lista.
También puede usar el método insertBefore para insertar/mover un elemento existente (consulte "Más ejemplos").
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| insertBefore() | Yes | Yes | Yes | Yes | Yes |
Sintaxis
node.insertBefore(newnode, existingnode)
Valores paramétricos
| 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 |
Detalles técnicos
| Valor devuelto: | Un objeto de nodo, que representa el nodo insertado. |
|---|---|
| Versión DOM | Objeto de nodo de nivel básico 1 |
Más ejemplos
Ejemplo
Mover un elemento <li> de una lista a otra:
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);