JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<div id="parent"></div>
<button id="btn">Trigger</button>

JavaScript

// create a target element
var target = document.querySelector("#parent");

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
 
// pass in the target node, as well as the observer options
observer.observe(target, config);

// Trigger DOM event
var trigger = document.getElementById("btn");
trigger.addEventListener("click", function(){
    // create a div element and try to
    // append to our target
    var div = document.createElement("div");
    target.appendChild(div);
})

 
// later, you can stop observing
//observer.disconnect();