/

El método insertBefore para insertar un nuevo hijo en el DOM

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í.

Deja una respuesta

Your email address will not be published.

Anterior post

Artenara finalista a Capital del Turismo Rural 2020

JavaScript Radio Altruistas Ocio Las Palmas
Siguiente post

Eliminar el hijo indicado del DOM con removeChild, en javaScript

Latest from javaScript