- Create An Image Element Object Using createElement()
- Set An Image URL To An Image Element
- Show The Image On The Browser
1. Create An Image Element Object Using createElement()
createElement() is one of the DOM API methods that the browser offers to interact with the DOM tree.
It allows you to create any type of HTML element.
This method takes an argument which will be the HTML element that I want to create.
In this case…<img />
const image = document.createElement("img");
When you call the createElement() method with the tag name as an argument on the document object, it will return an HTML element object.
Assign it to a constant called image.
2. Set An Image URL To An Image Element
The second step is to set an image URL using the .src property of the image element object.
Let’s assume that there is an images folder and it has an image.png file in your project folder with the same root level of your index.html and main.js file.
const image = document.createElement("img"); image.src = "images/image.png";
Assign the location path of the image file inside quotes to the .src property of the image element object.
So the file path will be…images/image.png inside the quotes.
Alternatively, I can also use the third-party URL of an image.
Here is one of the websites that offers free image urls with random images.
3. Show The Image On The Browser
The third step is to show the image on the browser.
In other words, add the image element to the DOM tree.
At this stage, I’ve successfully created an image element object and set an image to it but it’s not yet inserted to the DOM. (Document Object Model)
The DOM (Document Object Model) is the tree structure representation of the HTML file rendered inside the browser.
const image = document.createElement("img"); image.src = "images/image.png"; document.body.appendChild(image):
Let’s add the image element object inside the body element by calling appendChild() on the
Pass the image element as an argument to the appendChild() method.
And the image becomes visible on the browser.
Create An Image Using The Image() Constructor
There is another way to create an image element using the Image Object Constructor.
To use the Image constructor, all I have to do is to replace the document.createElement(“img”) code with new Image().
const image = new Image(); image.src = "images/image.png"; document.body.appendChild(image):
The second and third lines of the code remain the same.
And it works like before.