Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create an image element dynamically using JavaScript ?

  • Difficulty Level : Easy
  • Last Updated : 20 Jul, 2021

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 created. We can replace click event by any other JavaScript event.

Approach 1:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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.




<!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:



  • Before clicking on the button:
  • After clicking on the button:

Approach 2:

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

Example 2: This example implements the above approach.




<!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:

  • Before clicking on the button:
  • After clicking on the button:

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
Recommended Articles
Page :

Start Your Coding Journey Now!