El Document Object Model, conocido usualmente como DOM por sus siglas en inglés, se basa en la idea de un árbol jerárquico de etiquetas HTML. Este concepto nos permite acceder a los distintos nodos HTML que conforman un archivo y sus datos. Además, podemos modificar esta estructura al crear nuestros propios elementos HTML y ubicarlos donde queramos. En este post, te enseñaremos cómo crear un elemento img en el DOM desde su creación hasta su ubicación.
Antes de empezar
Antes de enseñarte cómo crear un elemento img en el DOM, te recomendamos profundizar en la creación y ubicación de elementos en este espacio. Para ello, puedes leer nuestros posts sobre crear elementos en el DOM y ubicar elementos creados en el DOM.
En esos artículos te hemos enseñado que el proceso de creación de un nuevo elemento en el DOM es el siguiente. Primero, deberemos usar el comando document.createElement para crear un nuevo elemento de una etiqueta HTML. En este comando podemos insertar la etiqueta que queramos, sea div, p, img o cualquier otra. Además, este comando se puede guardar en una variable personalizada que nos permita identificar el elemento y su contenido. Para ello, usamos const y le damos el nombre que queramos.
Después de crear el elemento, debemos añadirle contenido con alguna de las propiedades disponibles para la etiqueta determinada. Finalmente, deberemos ubicar el elemento creado dentro del árbol jerárquico de nuestro documento. Para ello, podemos seleccionar el nodo del cual queremos que nuestro elemento sea hijo y utilizar los métodos appendChild o prepend.
En los siguientes párrafos te enseñaremos cómo crear un elemento img en el DOM. Para ejemplificar nuestro árbol, usaremos la siguiente estructura HTML:
<body>
<main>
<p>soy el párrafo 1</p>
<div>hola</div>
</main>
</body>
¿Cómo crear un elemento img en el DOM?
Para crear un elemento img en el DOM, lo primero que debemos hacer es usar el comando document.createElement y pasar como parámetro el elemento HTML que queramos, en nuestro caso img. Recuerda que este comando lo podemos guardar en una variable con el nombre que queramos. Es decir, el elemento img que estamos creando puede tener un nombre más específico. Por ejemplo, podemos llamar a la imagen profileImage si su fuente es una imagen de perfil por defecto:
const profileImage = document.createElement (‘img’)
Siempre que estés nombrando variables o funciones dentro de tu código, ya sea JavaScript o cualquier otro lenguaje de programación, te recomendamos ser muy específico. Esto te permitirá saber qué es lo que hace una función o contiene una variable a partir de su nombre, sin necesidad de ver todo su código. Además, es bueno que los nombres sean simples de escribir, pues lo más seguro es que los repitas varias veces en tu proyecto.
Ahora, el siguiente paso para crear un elemento img en el DOM es otorgarle un contenido. Para ello existen muchas opciones. En nuestro post sobre crear elementos en el DOM hemos usado la propiedad texContent para modificar el contenido de un párrafo. En este caso, queremos pasarle la URL de la imagen a la que queremos que nos dirija. Para ello, podemos usar la propiedad src, que en este momento se encuentra vacía:
profileImage.src
‘ ‘
Ahora basta con igualar esta propiedad src de tu elemento profileImage a la URL que desees:
profileImage.src = ‘https://…’
El último paso para crear un elemento img en el DOM es ubicar este elemento dentro del árbol jerárquico de nuestro documento. Este paso es fundamental para que veamos nuestro elemento en el navegador, pues si no lo ejecutamos el elemento queda en un vacío sin conexión a nuestro archivo. A continuación, te mostramos cómo hemos ejecutado esta acción usando el comando querySelector:
document.querySelector(‘main’).appendChild(profileImage)
Al ejecutar la línea de código anterior, hemos logrado que la imagen en la URL que hemos pasado aparezca en nuestro navegador. Además, hemos transformado la estructura de nuestro código, pues ahora hay un elemento img dentro del main:
<body>
<main>
<p>soy el párrafo 1</p>
<div>hola</div>
<img src= ‘https://…’ >
</main>
</body>
Recuerda quem cuando utilizamos el método appendChild, siempre ubicaremos el elemento como último hijo del padre seleccionado. En este caso, img se ha ubicado como el tercer hijo del elemento main, pues es la última posición disponible. Si quisieras hacer que img fuera el primer hijo, tendrías que utilizar el método prepend:
document.querySelector (‘main’).prepend(profileImage)
¿Cuál es el siguiente paso?
Ahora que sabes cómo crear un elemento img en el DOM, ¡es momento de aplicarlo en tus propios proyectos! Por ello, el siguiente paso es inscribirte a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar todo tipo de proyectos para la web con diversos lenguajes de programación y herramientas. ¡Anímate a dar el siguiente paso en tu formación y matricúlate ya!
