Skip to content
Related Articles

Related Articles

How to create an image element dynamically using JavaScript ?

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 11 Nov, 2022
Improve Article
Save Article

Given an HTML element and the task is to create an <img> element and append it to the document using JavaScript. In these 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 1: 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;" >
        GeeksforGeeks
    </h1>
      
    <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
    </p>
      
    <button onclick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
    </p>
      
    <script>
        var up = document.getElementById('GFG_UP');
        up.innerHTML = "Click on the button to add image element";
        var down = document.getElementById('GFG_DOWN');
          
        function GFG_Fun() {
            var img = document.createElement('img');
            img.src =
            document.getElementById('body').appendChild(img);
            down.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 2: 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;" >
        GeeksforGeeks
    </h1>
      
    <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
    </p>
      
    <button onclick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
    </p>
      
    <script>
        var up = document.getElementById('GFG_UP');
        up.innerHTML = "Click on the button to add image element";
        var down = document.getElementById('GFG_DOWN');
          
        function GFG_Fun() {
            var img = new Image();
            img.src =
            document.getElementById('body').appendChild(img);
            down.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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!