JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
    <div>
        <p>Foo</p>
    </div>
</div>

JavaScript

var DOMwatcher = function(root, callback){
  var __appendChild = document.body.appendChild;
    
  var patch = function(node){
    if(typeof node.appendChild !== 'undefined' && node.nodeName !== '#text'){
      node.appendChild = function(incomingNode){
        callback(node, incomingNode);
        patch(incomingNode);
        walk(incomingNode);
        __appendChild.call(node, incomingNode);
      };
    }
    walk(node);  
  };
  
  var walk = function(node){
    var i = node.childNodes.length;
    while(i--){
      patch(node.childNodes[i]);
    }
  };
  
  patch(root);

};

DOMwatcher(document.body, function(targetElement, newElement){ 
   alert('append detected');    
});

$('#container ul li').first().append('<div><p>hi</p></div>');
$('#container ul li div p').append('<a href="#foo">bar</a>');