Skip to content
Related Articles
Open in App
Not now

Related Articles

How to add HTML elements dynamically using JavaScript ?

Improve Article
Save Article
  • Last Updated : 22 Nov, 2021
Improve Article
Save Article

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:


<!DOCTYPE html>
        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;
    <div id="innerdiv"></div>
    <button id="mybutton">
        click me
            addEventListener("click", function () {
            innerHTML += "<h3>Hello geeks</h3>";


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!