JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

$(document).ready(function(){
    var testNode = document.getElementById("test");
    
    document.getElementById("changer").addEventListener("click", function(){
       testNode.firstChild.nodeValue= "Goodbye";
    }, false);
    
    testNode.addEventListener("DOMCharacterDataModified", function(){
       updateResults("DOMCharacterDataModified"); 
    }, false);
    
    testNode.addEventListener("DOMSubtreeModified", function(){
       updateResults("DOMSubtreeModified");
    }, true);
    
    testNode.addEventListener("DOMNodeInserted", function(){
       updateResults("DOMNodeInserted");
    }, false);
    
    
    function updateResults(str){
       document.getElementById("results").innerHTML += str + "<br/>";   
    }
});