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 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.
Please Login to comment...