To create an image element in JavaScript, you can use the createElement() function or the Image() constructor. Specific steps will be covered in this article. Let’s check it out!
Create an image element in JavaScript
We offer the following two methods to help you know how to create an image element in JavaScript:
- Using the createElement() method
- Using the Image() constructor
Using the createElement() method
The createElement() method creates an element node.
Syntax:
document.createElement(type)
Parameters:
- type: The type of element to create.
Return value:
Node: The created element node.
To create an image element using the createElement() method, we need to set the type parameter to ‘img’. Then, set the src attribute to the image’s URL. Finally, add the newly created image element to the body using the document.body.appendChild() method.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#img-border {
border-radius:15px;
margin: 50px;
}
.img-border {
border:15px solid black;
}
</style>
</head>
<body>
<script>
const img = document.createElement("img");
img.src = "https://by.com.vn/7RGUl";
//Set attributes for images inline.
img.style.width = '300px';
//Set attributes for images using the setAttribute() method.
img.setAttribute('height', 170);
//Set attribute for image by id.
img.id = "img-border";
//Set attributes for images using the class.
img.classList.add("img-border");
//Add events for images
img.addEventListener('mouseover', function mouseOver() {
img.style.border = "15px solid pink";
});
img.addEventListener('mouseout', function mouseOut() {
img.style.border = "15px solid black";
});
//Add image element to the body
document.body.appendChild(img);
</script>
</body>
</html>Output:
The example above shows different ways to set attributes for the image element.
Alternatively, you can use the image() constructor to create an image element.
Using the Image() constructor
The image() constructor is used to create a new image element.
Syntax:
new Image(width, height)
Parameters:
- width: The width of the image.
- height: The height of the image.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.img-border {
border:15px solid black;
border-radius:15px;
margin: 50px;
}
</style>
</head>
<body>
<script>
const img = new Image(300, 170);
img.src = "https://by.com.vn/7RGUl";
//Set attributes for images using the class.
img.classList.add("img-border");
//Add events for images
img.addEventListener('mouseover', function mouseOver() {
img.style.border = "15px solid pink";
});
img.addEventListener('mouseout', function mouseOut() {
img.style.border = "15px solid black";
});
//Add image element to the body
document.body.appendChild(img);
</script>
</body>
</html>Output:
Summary
This article has shown how to create an image element in JavaScript. I hope the information in this article will be helpful to you. If you have any problems, please comment below. I will answer as possible. Thank you for reading!
Maybe you are interested:
- How To Set A Radio Button To Checked/Unchecked In Javascript?
- Append text to a Paragraph element using JavaScript
- How To Change Background Color On Click In JavaScript?
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP