Método insertBefore () del DOM HTML

Objeto Elemento de HTML DOM

insertBefore()El método se utiliza para insertar un subnodo antes de un nodo existente especificado.

Si el subobjeto dado es una referencia a un nodo existente en el documento, insertBefore () lo mueve de su posición actual a una nueva ubicación (consulte los ejemplos adicionales a continuación).

Usoappendchild()El método añade un nodo al final de la lista de nodos hijos del nodo padre especificado.

Sintaxis:

node.insertBefore(newNode, existingNode)

var newElem = document.createElement("h"3");　　//　Crear un nuevo h3Elemento
var newContent = document.createTextNode("Hi there");　　//　Crear algunos contenido de texto
newElem.appendChild(newContent);　　//　Agregar el nodo de texto al nuevo h3
var body = document.body;　　//　Obtener BODY
body.insertBefore(newElem, body.childNodes[0]);　//　Insertar H en el primer hijo de BODY3

Nota:Si desea crear un nuevo elemento con texto, recuerde crear el texto como nodo Text, luego adjuntarlo al elemento y luego adjuntar el elemento al documento.

Compatibilidad del navegador

Todos los navegadores admiten completamente el método insertBefore():

Valor del parámetro

Detalles técnicos

Más ejemplos

Crear un elemento <p> e insertarlo en el elemento <div>:

var para = document.createElement("p");　　　//　Crear un nodo <p>
var txt = document.createTextNode("Este es un párrafo.");//　Crear un nodo de texto
para.appendChild(txt);//　Añadir texto a <p>
var div = document.getElementById("demo");//　Obtener el DIV con "id=demo"
div.insertBefore(para, div.childNodes[0]);//　Insertar un nodo P antes del primer hijo de DIV

Este ejemplo mueve un elemento desde su posición actual a una nueva posición:

var elem = document.getElementById("myList2").lastElementChild;
var list1　= document.getElementById("myList1");
list1.insertBefore(elem, list1.childNodes[0]);

Referencias relacionadas

Referencia de HTML DOM:nodoMétodo .hasChildNodes()

Referencia de HTML DOM:nodoMétodo .appendChild()

Referencia de HTML DOM:nodoMétodo .removeChild()

Referencia de HTML DOM:nodoMétodo .replaceChild()

Referencia de HTML DOM:Método document.createElement()

Referencia de HTML DOM:Método document.createTextNode()

Referencia de HTML DOM:Método document.adoptNode()

Referencia de HTML DOM:Método document.importNode()

Objeto Elemento de HTML DOM