JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">Hello</div>
<a href="#" id="changer">Change text</a>
<a href="#" id="hider">Hide text</a>
<br/>
<br/>
<br/>
<div id="results">Results<br/></div>

CSS

.active {
  display: block;
}

.hide {
  display: none;
}

JavaScript

$(document).ready(function(){
    var testNode = document.getElementById("test");
    
    document.getElementById("changer").addEventListener("click", function(){
       testNode.firstChild.nodeValue= "Goodbye";
    }, true);
    
    document.getElementById("hider").addEventListener("click", function(){
       testNode.className="hide";
    }, true);

    testNode.addEventListener("DOMAttrModified", function(){
       updateResults("DOMAttrModified");
    }, true);

    testNode.addEventListener("DOMCharacterDataModified", function(){
       updateResults("DOMCharacterDataModified"); 
    }, true);
    
    testNode.addEventListener("DOMSubtreeModified", function(){
       updateResults("DOMSubtreeModified");
    }, true);
    
    testNode.addEventListener("DOMNodeInserted", function(){
       updateResults("DOMNodeInserted");
    }, true);
    
    function updateResults(str){
       document.getElementById("results").innerHTML += str + "<br/>";   
    }
});