How to add an image to the DOM using JavaScript

May 21, 2020

Learn how to add an image to the DOM with JavaScript by creating an img element with createElement, setting its src, and appending it with appendChild.

~~~

I had the need to programmatically add an image to the DOM, in other words to an HTML page, dynamically.

To do that, I created an img element using the createElement method of the Document object:

const image = document.createElement('img')

Then I set the src attribute of the image:

image.src = '/picture.png'

(You can use a relative or an absolute URL, just as you’d use in a normal HTML img tag)

Then I identified the container I wanted to append the image to, and I called the appendChild() method on it:

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

Tagged: Web Platform · All topics

~~~