How To Create An Image Element In JavaScript

Create An Image Element In JavaScript

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:

Leave a Reply

Your email address will not be published. Required fields are marked *