How to add HTML elements dynamically using JavaScript ?

Last Updated : 16 Jan, 2024

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.

Below are the approaches used to add HTML elements dynamically using JavaScript :

Table of Content

Using innerHTML
Using appendChild() method

Approach 1: Using innerHTML

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>
        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:

Approach 2: Using appendChild() method

The HTML DOM appendChild() Method of the node interface, is used to create a text node as the last child of the node. This method is also used to move an element from one element to another element. It is used for creating a new element with some text then first create the text as the text node and then append it to the element, then append the element to the document.

Syntax:

node.appendChild(node);

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>
        GeeksforGeeks
    </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:

debadebaduttapanda7

Improve

Article Tags :

How to add HTML elements dynamically using JavaScript ?

Approach 1: Using innerHTML

Approach 2: Using appendChild() method

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?