Thursday, August 28, 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
32236 POSTS0 COMMENTS
Milvus
80 POSTS0 COMMENTS
Nango Kala
6609 POSTS0 COMMENTS
Nicole Veronica
11779 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11828 POSTS0 COMMENTS
Shaida Kate Naidoo
6719 POSTS0 COMMENTS
Ted Musemwa
7002 POSTS0 COMMENTS
Thapelo Manthata
6678 POSTS0 COMMENTS
Umr Jansen
6690 POSTS0 COMMENTS