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
Then I identified the container I wanted to append the image to, and I called the
appendChild() method on it:
More browser tutorials:
- The Push API Guide
- The Document Object Model (DOM)
- Service Workers Tutorial
- Why use a preview version of a browser?
- Mouse events
- The Navigator Object
- How to add a click event to a list of DOM elements returned from querySelectorAll
- CORS, Cross-Origin Resource Sharing
- How to change a DOM node value