How to use createElement and removeChild In Javascript

Using innerHTML

In this approach, we are using the createElement() method to dynamically add a new HTML tag and the removeChild method to remove it. This approach provides more control over the newly created tag and allows for efficient addition and removal of the tag from the DOM.

Example: The example demonstrates adding and removing new HTML Tags with JavaScript using createElement and removeChild.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
            color: green;
        }

        #container {
            margin-top: 20px;
            text-align: center;
        }

        #container button {
            margin: 2px;
            padding: 5px 10px;
            background-color: #3498db;
            color: white;
            border: none;
            cursor: pointer;
        }

        #container button:hover {
            background-color: #2980b9;
        }

        .new-div {
            margin-top: 10px;
            padding: 10px;
            margin-left: 43%;
            width: 100px;
            background-color: green;
            border-radius: 5px;
            color: white;
        }
    </style>
</head>

<body>

    <div id="container">
        <h1>w3wiki</h1>
        <button onclick="addDiv()">
          Add Div
          </button>
        <button onclick="removeDiv()">
          Remove Div
          </button>
    </div>

    <script>
        function addDiv() {
            let container = 
                    document.getElementById('container');

            // Create a new div
            let newDiv = 
                    document.createElement('div');
            newDiv.className = 'new-div';
            newDiv.textContent = 'New Div Tag';

            // Add the new div to the container
            container.appendChild(newDiv);
        }

        function removeDiv() {
            let container = 
                    document.getElementById('container');

            // Remove the last added div
            let divs = container.querySelectorAll('.new-div');
            if (divs.length > 0) {
                let lastDiv = divs[divs.length - 1];
                container.removeChild(lastDiv);
            }
        }
    </script>

</body>

</html>

Output:

Remove & Add new HTML Tags using JavaScript

In web development, dynamically add or remove HTML tags using JavaScript. This can be useful for creating interactive user interfaces and updating content based on user actions.

Below are the approaches to remove and add new HTML tags using JavaScript:

Table of Content

Using createElement and removeChild
Using innerHTML

Tags:

#JavaScript-Questions #JavaScript #Web Technologies

Using innerHTML

How to use createElement and removeChild In Javascript

Remove & Add new HTML Tags using JavaScript

Similar Reads

Contact Us