Ejemplo
Insertar una nueva <li> elemento antes de que el primer elemento secundario de un <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 insertar:
- Coffee
- Tea
Después de insertar:
- Water
- Coffee
- Tea
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El insertBefore() método inserta un nodo como un niño, justo antes de un elemento secundario existente, que se especifica.
Consejo: Si desea crear un nuevo elemento de la lista, con el texto, recuerde que debe crear el texto como un nodo de texto que se anexa a la <li> elemento, a continuación, insertar <li> a la lista.
También puede utilizar el método para insertar insertBefore / mover un elemento existente (See "More Examples") .
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| insertBefore() | Sí | Sí | Sí | Sí | Sí |
Sintaxis
Los valores de los parámetros Parámetro Tipo Descripción newnode Node object Necesario. El objeto de nodo que desea insertar existingnode Node object Opcional. El nodo hijo que desea insertar el nuevo nodo antes. Cuando no se especifica, el método insertBefore insertará el nodo_nuevo al final
Detalles técnicos
Valor de retorno: Un objeto de nodo, representando el nodo insertado Versión DOM Nivel básico de objetos 1 Nodo
Más ejemplos
Ejemplo
Mover un <li> elemento de una lista a otra:
var node = document.getElementById("myList2").lastChild;
var
list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]); Antes de insertar:
- Coffee
- Tea
- Water
- Milk
Después insertBefore:
- Milk
- Coffee
- Tea
- Water
Inténtalo tú mismo "