Los últimos tutoriales de desarrollo web
 

HTML DOM insertBefore() Method

<Elemento de objeto

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
Ejemplos

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 "

<Elemento de objeto