InsertBefore es un método en javaScript del objeto element y se utiliza para insertar un nuevo hijo antes del elemento especificado como referencia. Si la referencia da como resultado null, se insertará al final. Se obtiene el elemento como valor de retorno.
Sintaxis:
InsertBefore (hijo, referencia)
Ejemplo:
<html>
<body>
<ul id="lista1">
<li id="item1"> Item hijo uno</li>
</ul>
<script>
//declaración de funciones
function crearItem (id, texto) {
//se crea un nuevo elemento
var item = document.createElement("li");
//se fijan valores
item.setAtrribute ("id", id);
item.innerHTML = texto;
return item;
}
function obtenerContenido (elemento) {
return elemento.id + " contiene: " + elemento.innerHTML;
}
//Buscamos por id
var lista = document.getElementById("lista1");
//Mostramos núemro de hijos
console.log (lista.children.length); //1
//Creamos nuevos elementos
var item = crearItem ("item0", "item hijo cero");
//añadimos hijo antes del priemr item
lista.insertBefore (item, lista.children[0];
//mostramos número de hijos
console.log (lista.children.length); //2
//Mostramos resultado
for (let hijo of lista.children) {
console.log (obtenerContenido (hijo));
}
//Mostrará los mensajes:
//"item0" contiene: "item hijo cero"
//"item1" contiene: "item hijo uno"
</script>
</body>
</html>
Código verificado. Las propiedades y métodos del objeto element del DOM se pueden repasar aquí.
