Detect changes to an element/parent or its children with MutationObserver (JavaScript)

mutation-parent-children.js

const parentEl = document.querySelector('.my-parent')

const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.", mutation);
    }
    if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`, mutation.target[mutation.attributeName]);
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Observe some elements
const config = { attributes: true, childList: true, subtree: true };
observer.observe(parentEl, config)

// ex: Disconnect whenever you want
setTimeout(() => observer.disconnect(), 5000)