How to use Event Listeners In NodeJS

Using Mutation Observer

The Event listeners can be attached to the specific events like DOMNodeInserted and DOMNodeRemoved to detect the node additions and removals within the DOM element. However, these events are deprecated and not recommended for the use in the modern web development.

Example: This example demonstrates how to detect changes to the DOM node using event listeners in JavaScript.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        The Node Change Detection
    </title>
</head>

<body style="text-align: center;">
    <div id="target">
        <h3>
            Initial content
        </h3>
    </div>
    <button id="addButton">
        Add Node
    </button>
    <button id="removeButton">
        Remove Node
    </button>
    <p id="result"></p>
    <script>
        const targetNode = 
            document.getElementById('target');
        const result = 
            document.getElementById("result");
        function handleNodeInserted(event) {
            result.innerHTML = 'Added node is: ' 
                + event.target;
        }
        function handleNodeRemoved(event) {
            result.innerHTML = 'Removed node is: ' 
                + event.target;
        }
        document.getElementById('addButton').
            addEventListener('click', function () {
                const newParagraph = 
                    document.createElement('p');
                newParagraph.textContent = 'New paragraph';
                targetNode.appendChild(newParagraph);
        });
        document.getElementById('removeButton').
            addEventListener('click', function () {
                const firstParagraph = 
                    targetNode.querySelector('p');
                if (firstParagraph) {
                    targetNode.removeChild(firstParagraph);
                }
        });
        targetNode.addEventListener
            ('DOMNodeInserted', handleNodeInserted);
        targetNode.addEventListener
            ('DOMNodeRemoved', handleNodeRemoved);
    </script>
</body>

</html>

Output:

How to Detect if Node is Added or Removed Inside a DOM Element?

Detecting the nodes when they are added or removed from the DOM (Document Object Model) element is a common requirement in web development. It allows developers to respond dynamically to the changes in the DOM structure enabling features such as live updates, event delegation, and more.

You can utilize the below approaches to detect the changes in the DOM:

Table of Content