In this article, we learn how to add HTML elements dynamically using JavaScript. A basic understanding of HTML, CSS, and Javascript is required. Here we are going to use a button and by clicking this button, we can add an HTML element dynamically in this example.
Approach: Create an HTML file with any name (Ex- index.html) then write the outer HTML template and take one button so that when someone clicks on the button, an HTML is dynamically added one by one in a list format. We have attached an onclick event listener to the button, when someone clicks that button immediately the event will fire and execute the callback function attached to that event listener inside the callback function we need to mention a certain task that we want to happen after an onclick event is a fire.
Example: Below is the implementation of the above approach:
HTML
<!DOCTYPE html><html><head> <style> h1 { color: green; display: flex; justify-content: center; } #mybutton { display: block; margin: 0 auto; } #innerdiv { display: flex; flex-direction: column; justify-content: center; align-items: center; } </style></head><body> <h1> neveropen </h1> <div id="innerdiv"></div> <button id="mybutton"> click me </button> <script> document.getElementById("mybutton"). addEventListener("click", function () { document.getElementById("innerdiv"). innerHTML += "<h3>Hello neveropen</h3>"; }); </script></body></html> |
Output:
Example 2: In this example, we will see the use of the appendChild() method.
HTML
<!DOCTYPE html><html><head> <style> h1 { color: green; display: flex; justify-content: center; } #mybutton { display: block; margin: 0 auto; } div { display: flex; flex-direction: column; justify-content: center; align-items: center; } </style></head><body> <h1> neveropen </h1> <div id="innerdiv"></div> <button onclick="mybutton()" id="mybutton">Click Me</button> <script> function mybutton() { const para = document.createElement("div"); para.innerText = "Hello Geeks"; document.body.appendChild(para); } </script></body></html> |
Output:
