How to create an image element dynamically using JavaScript ?

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:
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 = 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';            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 = 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';            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.
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?