Crear nodo Imagen

indice de ejemplos

Tenemos una página web y quiero que al cargarse se ejecute un script que cree y agregue a la página un elemento en el que se colocará también de forma dinámica una imagen.

Esta imagen se incluirá en un bloque div cuyo atributo id es imagen y que ya existen en la página.

 

Solución

<script>

function cargarImg(){

//crear title

var destino= document.getElementById("imagen");

if (destino == undefined)

   alert("No existe el bloque destino")

else{

   var nodoImg = document.createElement("img");

   nodoImg.setAttribute("src", "https://aulascript.com/imgs/programa.jpg")

   destino.appendChild(nodoImg);

   }

}

</script>

 

La sección body contiene el resto de la página, el nodo se crea con un evento load para asegurar que el documetno esté cargado..

<body onload="cargarImg()">

<p>Página del ejemplo de crear nodo de Imagen</p>

<div id="imagen"></div>

</body>

Explicación

El proceso para crear nodos y añadirlos al documento es muy simple

  1. Se crea el nodo más bajo en la jerarquía del arból del documento
  2. Se le agregan los atributos que necesite
  3. Se agrega el nodo (hijo) al nodo que lo contiene (padre)
  4. Se repite hasta llegar al nodo más alto.

La creación de nodos se hace desde el objeto Document:

  • document.createElement(tipo_elemento) el tpo de elemento puede ser cualquier elemento html: p, img, div...Devuelve el nodo creado
  • nodoPadre.appendChild(nodo_nuevo), el nodo_nuevo se añade a un nodo padre
  • nodo.setAttribute(nombre_attr, valor) Se le pone valor a un atributo

El nodo de destino del ejemplo se obtiene buscándolo mediante el método document.getElementById( valor_id) que devuelve el objeto cuyo id es igual al valor del argumento. Este objeto es el nodo donde se quiere añadir el elemento img.

En una página web el valor de id no puede repetirse, por eso podemos usarlo para identificar cada elemento (nodo) de la página.