JavaScript program to update DOM



JavaScript is a powerful tool for dynamically updating the Document Object Model (DOM) of a web page. The Document Object Model (DOM) is an important part of web development that allows changing the structure, content, and style of a webpage. This article explains how to update the DOM using different methods and provides examples.

Understanding the DOM

DOM stands for Document Object Model. The DOM represents a webpage as a tree structure, where each element is a node. JavaScript allows developers to select, modify, and manipulate these elements in real time, making web pages dynamic and interactive.

Updating the DOM

Updating the Document Object Model can be done in the following ways:

Adding Elements

The DOM allows adding elements to it. To add elements to the DOM, you can use methods like createElement() to create a new element and/or appendChild() or insertBefore() it to the document.

Example

The following is a simple example of adding elements to the DOM.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <button id="addParagraph">Add a Paragraph</button>

    <script>
        // Function to create and add a new paragraph
        function addNewParagraph() {
            // Create a new paragraph element
            let newParagraph = document.createElement('p');
            newParagraph.textContent = 'This is a new paragraph.';

            // Get the body element
            let body = document.body;

            // Append the new paragraph to the body
            body.appendChild(newParagraph);
        }

        // Add an event listener to the button
        document.getElementById('addParagraph').addEventListener('click', addNewParagraph);
    </script>
</body>
</html>

Output

Removing Elements

The DOM allows removing elements from it. To remove elements from the DOM, you can use the remove() method or the removeChild() method.

Example

The following is a simple example of removing elements from the DOM.

<!DOCTYPE html>
<html>
<head>
    <title>Remove Element Example</title>
</head>
<body>
    <h1>Remove an Element from the DOM</h1>
    <p id="removeMe">This paragraph will be removed when you click the button.</p>
    <button id="removeButton">Remove Paragraph</button>

    <script>
        // Function to remove the element
        function removeElement() {
            // Get the element to remove
            let elementToRemove = document.getElementById('removeMe');

            // Remove the element
            if (elementToRemove) {
                elementToRemove.remove();
            }
        }

        // Add an event listener to the button
        document.getElementById('removeButton').addEventListener('click', removeElement);
    </script>
</body>
</html>

Output



Modifying Elements

The DOM allows modifying its elements. You can modify elements by changing their attributes, styles, or content.

Example

The following is a simple example of changing the attributes, styles, or content DOM.

<!DOCTYPE html>
<html>
<head>
    <title>Modify Element Example</title>
    <style>
        .new-class {
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>Modify an Element in the DOM</h1>
    <p id="modifyMe">This text will be modified when you click the button.</p>
    <button id="modifyButton">Modify Text</button>

    <script>
        // Function to modify the element
        function modifyElement() {
            // Get the element
            let elementToModify = document.getElementById('modifyMe');

            // Change the text content
            elementToModify.textContent = 'Modified text';

            // Change the style
            elementToModify.style.color = 'blue';

            // Add a class
            elementToModify.classList.add('new-class');
        }

        // Add an event listener to the button
        document.getElementById('modifyButton').addEventListener('click', modifyElement);
    </script>
</body>
</html>

Output




Conclusion

In this article, we have understood how much the Document Object Model is essential and how to update it. JavaScript offers strong tools for updating the DOM, which helps developers create dynamic and interactive web pages. By learning how to add, remove, and change elements, developers can build complex user interfaces that react to user actions.

Updated on: 2025-03-13T13:04:34+05:30

628 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements