How to use “MutationObserver API” to observe the changes to the target node

In this article, we will explore how to write a script in JavaScript to detect if a node is inserted or removed in an element.

One way to detect if a node is inserted or removed is to use the MutationObserver API. This API provides a way to observe changes to the DOM structure, including the addition or removal of nodes.

Here’s an example of how to use MutationObserver to detect if a node is inserted or removed in an element:

// Select the target node
var targetNode = document.getElementById("target-node");

// Create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "childList") {
      console.log("A node has been inserted or removed.");
    }
  });
});

// Configuration of the observer:
var config = {
  childList: true,
  subtree: true
};

// Pass in the target node, as well as the observer options
observer.observe(targetNode, config);

In this example, the MutationObserver is used to observe the changes to the target node with an ID of “target-node”. The configuration of the observer is set to monitor childList changes and to observe the entire subtree of the target node. The childList property is set to true so that the observer will be notified of changes to the target node’s children, including additions and removals of nodes.

When a node is inserted or removed, the observer’s callback function is executed. This function logs a message to the console indicating that a node has been inserted or removed.

It’s worth noting that MutationObserver is a relatively new API and may not be supported by all browsers. However, it’s widely supported in modern browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge.