Wednesday, September 24, 2025
HomeLanguagesHow to create an image element dynamically using JavaScript ?

How to create an image element dynamically using JavaScript ?

Given an HTML element and the task is to create an <img> element and append it to the document using JavaScript. In the following examples, when someone clicks on the button then the <img> element is created. We can replace the click event with any other JavaScript event

Approach 1:

  • Create an empty img element using document.createElement() method.
  • Then set its attributes like (src, height, width, alt, title, etc).
  • Finally, insert it into the document.

Example: This example implements the above approach. 

html




<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to create an image element
        dynamically using JavaScript ?
    </title>
</head>
 
<body id="body" style="text-align:center;">
 
    <h1 style="color:green;">
        neveropen
    </h1>
 
    <h3>
        Click on the button to add image element
    </h3>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <h2 id="result" style="color:green;"></h2>
 
    <script>
        let res = document.getElementById('result');
 
        function GFG_Fun() {
            let img = document.createElement('img');
            img.src =
            document.getElementById('body').appendChild(img);
            res.innerHTML = "Image Element Added.";
        }
    </script>
</body>
 
</html>


Output:

Approach 2:

  • Create an empty image instance using new Image().
  • Then set its attributes like (src, height, width, alt, title, etc).
  • Finally, insert it into the document.

Example: This example implements the above approach. 

html




<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to create an image element
        dynamically using JavaScript ?
    </title>
</head>
 
<body id="body" style="text-align:center;">
 
    <h1 style="color:green;">
        neveropen
    </h1>
 
    <h3>
        Click on the button to add image element
    </h3>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <h2 id="result" style="color:green;"></h2>
 
    <script>
        let res = document.getElementById('result');
 
        function GFG_Fun() {
            let img = new Image();
            img.src =
            document.getElementById('body').appendChild(img);
            res.innerHTML = "Image Element Added.";
        }
    </script>
</body>
 
</html>


Output:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

RELATED ARTICLES

Most Popular

Dominic
32316 POSTS0 COMMENTS
Milvus
84 POSTS0 COMMENTS
Nango Kala
6680 POSTS0 COMMENTS
Nicole Veronica
11852 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11910 POSTS0 COMMENTS
Shaida Kate Naidoo
6794 POSTS0 COMMENTS
Ted Musemwa
7070 POSTS0 COMMENTS
Thapelo Manthata
6751 POSTS0 COMMENTS
Umr Jansen
6761 POSTS0 COMMENTS