JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">Test DIV</div>

JavaScript

(function(_append, _appendTo, _after, _insertAfter, _before, _insertBefore) {
        $.fn.append = function() {
            this.trigger({
                type: 'DOMChanged',
                newnode: arguments[0]
            });
            return _append.apply(this, arguments);
        }; 
        $.fn.appendTo = function() {
            this.trigger({
                type: 'DOMChanged',
                newnode: this
            });
            return _appendTo.apply(this, arguments);
        };
        $.fn.after = function() {
            this.trigger({
                 type: 'DOMChanged',
                 newnode: arguments[0]
             });
            return _after.apply(this, arguments);
        };
        
        // and so forth
        
    }($.fn.append, $.fn.appendTo, $.fn.after, $.fn.insertAfter, $.fn.before, $.fn.insertBefore));


$('#test').bind('DOMChanged', function(e) {
    console.log('New node: ', e.newnode);
});

$('#test').after('<span>new span</span>');
$('#test').append('<p>new paragraph</p>');
$('<div>new div</div>').appendTo($('#test'));