Cómo agregar una imagen al DOM usando JavaScript

Tuve la necesidad de agregar programáticamente una imagen al DOM , es decir a una página HTML, de forma dinámica.

Para ello, creé un imgelemento utilizando el createElementmétodo del objeto Documento:

const image = document.createElement('img')

Luego establezco el srcatributo de la imagen:

image.src = '/picture.png'

(Puedes utilizar una URL relativa o absoluta, tal como lo harías en una imgetiqueta HTML normal)

Luego identifiqué el contenedor al que quería agregar la imagen y llamé al appendChild()método:

document.querySelector('.container').appendChild(image)

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript