I needed 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 absolute URL, just as you would 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