JSFiddle - React, Tailwind, and code Playground

HTML

<button>CLICK</button>
<div id="test">
    <div>subdiv1</div>
    <div>subdiv2</div>
</div>

JavaScript

;
(function ($) {
    $.fn.contentChange = function (types, data, fn) {
        return this.on('contentChange', types, null, data, fn);
    };
    var oDomManip = $.fn.domManip,
        oHtml = $.fn.html,
        oEmpty = $.fn.empty,
        oRemove = $.fn.remove,
        extendFct = function (oFct, sender, args) {
            return oFct.apply(sender, args), $.event.trigger('contentChange');
            //=>if testing specific element (#test) use instead following line
             //return oFct.apply(sender, args), $(sender).trigger('contentChange');
        };
    $.fn.domManip = function () {
        extendFct(oDomManip, this, arguments)
    };
    $.fn.html = function () {
        extendFct(oHtml, this, arguments)
    };
    $.fn.empty = function () {
        extendFct(oEmpty, this, arguments)
    };
    $.fn.remove = function () {
        extendFct(oRemove, this, arguments)
    };
   
})(jQuery);



$('button').click(function () {
    //remove don't triggered custom event if binded to specific element
    $('#test').find('div:first').remove();
    $('<div>insertAfter</div>').insertAfter('#test');
    $('<div>insertBefore</div>').insertBefore('#test');
    $('<div>appendTo</div>').appendTo('#test');
    $('#test').append('<div>append</div>');
    $('<div>NOT IN DOM</div>').prepend('test');
    $('<div>prependTo</div>').prependTo('#test');
});

$(document).contentChange(function () {
    console.log("document::onContentChange")
});
//=>uncomment if testing specific element (#test)
//$('#test').contentChange(function () {
    //console.log("#test::onContentChange")
//});