# How to add an image to the DOM using JavaScript

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

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-05-21 | Topics: [Web Platform](https://flaviocopes.com/tags/platform/) | Canonical: https://flaviocopes.com/how-to-add-image-dom/

I had the need to programmatically add an image to the [DOM](https://flaviocopes.com/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:

```js
const image = document.createElement('img')
```

Then I set the `src` attribute of the image:

```js
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:

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