Html element content change event

You could add some custom event to see effect change of the content of the element:
You can see this example here at jsFiddle: Html element content change event 
 

Html content

<table>
    <tr>
        <td valign="top">
           <button id="html">Click to see change 'html'.</button><br/>
           <button id="append">Click to see change 'append'.</button><br/>
           <button id="prepend">Click to see change 'prepend'.</button><br/>
           <div id="hello">This is text!</div>
        </td>
        <td valign="top">
            <div id="console"></div>
        </td>
    </tr>
</table>

jQuery content

// Redefines $.fn.html(), $.fn.append(), $.fn.prepend() to add custom events that are triggered before and after a DOM element's innerHtml is changed
// html-change-pre is triggered before the innerHtml is changed
// html-change-post is triggered after the innerHtml is changed

(function($) {
    var eventName = 'html-change';
    // Save a reference to the original html, append and prepend function
    $.fn.htmlx = $.fn.html;
    $.fn.appendx = $.fn.append;
    $.fn.prependx = $.fn.prepend;
    // Let's redefine the html, append and prepend function to include a custom event
    $.fn.html = function() {
        var currentHtml = this.htmlx();
        if(arguments.length) {
            this.trigger(eventName + '-pre', jQuery.merge([currentHtml], arguments));
            jQuery.fn.htmlx.apply(this, arguments);
            this.trigger(eventName + '-post', jQuery.merge([currentHtml], arguments));
            return this;
        } else {
            return currentHtml;
        }
    }
    $.fn.append = function() {
        var currentHtml = this.htmlx();
        if(arguments.length) {
            this.trigger(eventName + '-pre', jQuery.merge([currentHtml], arguments));
            jQuery.fn.appendx.apply(this, arguments);
            this.trigger(eventName + '-post', jQuery.merge([currentHtml], arguments));
            return this;
        } else {
            return currentHtml;
        }
    }
    $.fn.prepend = function() {
        var currentHtml = this.htmlx();
        if(arguments.length) {
            this.trigger(eventName + '-pre', jQuery.merge([currentHtml], arguments));
            jQuery.fn.prependx.apply(this, arguments);
            this.trigger(eventName + '-post', jQuery.merge([currentHtml], arguments));
            return this;
        } else {
            return currentHtml;
        }
    }
})(jQuery);
        
// Test
jQuery(document).ready(function() {

    jQuery('#hello').bind('html-change-pre', function() {
        $("#console").prepend('<div>html-change-pre triggered: '+counter+'</div>');
    });
    
    jQuery('#hello').bind('html-change-post', function() {
        $("#console").prepend('<div>html-change-post triggered: '+counter+'</div>');
    });
    var counter = 0;
    $("#html").click(function() {
        $("div#hello").html("<div>html: "+counter+"</div>");
        counter++;
    });
    $("#prepend").click(function() {
        $("div#hello").prepend("<div>prepend: "+counter+"</div>");
        counter++;
    });
    $("#append").click(function() {
        $("div#hello").append("<div>append: "+counter+"</div>");
        counter++;
    });
});

Example output at jsFiddle: