JSFiddle - React, Tailwind, and code Playground

by nerdess

HTML

<div id="test">
xyz
</div>

CSS

#test {background: red;}

JavaScript

$(document).ready(function() {

var observeMutation = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            console.log(mutation.type);
            console.log(mutation.addedNodes);
            console.log(mutation.attributeName);
        });    
});
     
    // Notify me of everything!
var observerConfig = {
        attributes: true, //Set to true if mutations to target's attributes are to be observed.
        childList: true, //Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed.
        characterData: true //to true if mutations to target's data are to be observed.
    };
     
    // Node, config
    // In this case we'll listen to all changes to body and child nodes
    var targetNode = document.getElementById('test');
    observeMutation.observe(targetNode, observerConfig);
    console.log(targetNode);
    $('#test').attr('data-bla', 'xxx');
    /*for (var i = 0; i < targetNodes.length; i++) {
        console.log(targetNodes[i]);
        observeMutation.observe(targetNodes[i], observerConfig);
    }*/

});