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 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 = document.getElementById('body').appendChild(img); down.innerHTML = "Image Element Added."; } </script> </body> </html> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Output:
- Before clicking on the button:
- After clicking on the button:
