How to Add a new Element to HTML DOM in JavaScript ?

Last Updated : 02 Apr, 2024

Adding a new element to the HTML DOM dynamically using JavaScript is a common requirement in web development. This allows developers to create interactive and dynamic web pages without the need to reload the entire page.

There are several approaches to adding a new element to HTML DOM in JavaScript which are as follows:

Table of Content

Using createElement
Using innerHTML

Using createElement

In this approach, we are using the createElement() method which is used to dynamically create a new HTML element. This method allows developers to create new elements and then insert them into the DOM.

Syntax:

let newElement = document.createElement("elementName");

Example: The below example uses the createElement method to add a new element to HTML DOM.

JavaScript

<!DOCTYPE html>
<html>

<head>
    <title>Add Element to DOM</title>
    <style>
        h1 {
            color: green;
        }

        .container {
            text-align: center;
        }

        .newDiv {
            color: white;
            height: 70px;
            width: 150px;
            background-color: green;
            padding: 10px;
            margin-top: 10px;
            margin-left: 40%;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <h4>Using createElement</h4>
        <button onclick="addNewElement()">
            Add New Element</button>
    </div>
    <script>
        function addNewElement() {
            const newDiv = document
                .createElement('div');
            newDiv.classList.add('newDiv');
            newDiv.textContent = 'This is a new div element';
            document
                .querySelector('.container')
                .appendChild(newDiv);
        }
    </script>
</body>

</html>

Output:

gfgcr

Using innerHTML

In this approach we are using the innerHTML property to add a new element to the HTML DOM . It involves setting the innerHTML of an existing element to include the HTML markup for the new element.

Syntax:

selctedHTMLElement.innerHTML = "newElement";

Example: The below example uses the innerHTML property to add a new element to HTML DOM.

JavaScript

<!DOCTYPE html>
<html>

<head>
    <title>Add Input Element to DOM</title>
</head>
<style>
    h1 {
        color: green;
    }

    #container {
        text-align: center;

    }

    button {
        cursor: pointer;
    }
</style>

<body>

    <div id="container">
        <h1>GeeksForGeeks</h1>
        <h4>Using innerHTML</h4>
        <button onclick="addInputElement()">
            Add Input Element</button>

    </div>


    <script>
        function addInputElement() {
            const container = document
                .getElementById('container');

            container
                .innerHTML += '<input type="text"
            placeholder = "Enter text..." > ';
        }
    </script>
</body>

</html>