How to use createElement In Javascript

Using innerHTML

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

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

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