How to add an image to the DOM using JavaScript
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)
→ Read my DOM Tutorial on
The Valley of Code
→ Read my
Browser Events Tutorial
on The Valley of Code
→ Read my
Browser APIs Tutorials
on The Valley of Code
h
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X