Given an HTML element and the task is to create an <img> element and append it to the document using JavaScript. In the following 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: 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;"> neveropen </h1> <h3> Click on the button to add image element </h3> <button onclick="GFG_Fun()"> click here </button> <h2 id="result" style="color:green;"></h2> <script> let res = document.getElementById('result'); function GFG_Fun() { let img = document.createElement('img'); img.src = document.getElementById('body').appendChild(img); res.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: 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;"> neveropen </h1> <h3> Click on the button to add image element </h3> <button onclick="GFG_Fun()"> click here </button> <h2 id="result" style="color:green;"></h2> <script> let res = document.getElementById('result'); function GFG_Fun() { let img = new Image(); img.src = document.getElementById('body').appendChild(img); res.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.
