Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add HTML elements dynamically using JavaScript ?

  • Last Updated : 22 Nov, 2021

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. 

Below is the implementation of the above approach:

index.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>
        GeeksforGeeks
    </h1>
    <div id="innerdiv"></div>
    <button id="mybutton">
        click me
    </button>
    <script>
        document.getElementById("mybutton").
            addEventListener("click", function () {
         document.getElementById("innerdiv").
            innerHTML += "<h3>Hello geeks</h3>";
        });
    </script>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!