The DOM: Add an image to the DOM

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

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)

Lessons in this unit:

0: Introduction
1: The `window` object
2: The `document` object
3: Types of nodes
4: Traversing the DOM
5: Editing the DOM
6: Selectors API
7: DOM Ready
8: Add a class to an element
9: Remove a class from an element
10: Check if element has a class
11: Change a DOM node value
12: Loop through DOM elements
13: ▶︎ Add an image to the DOM
14: Create a DOM attribute
15: Remove children elements
16: Replace a DOM element
17: insertAdjacentHTML
18: Add click events to a list