jQuery: How can I detect if the html has changed within a given element?

Question

In javascript, possibly using jQuery, how can I detect if the html content of a given element has changed?

I\'d like to be able to do somthing like:

Answer 1

You can use the DOM Level 3 event DOMNodeInserted. Example:

$('#myDiv').bind('DOMNodeInserted', function(e) {
    console.log('element: ', e.target, ' was inserted);
});

Demo: http://www.jsfiddle.net/vsgdZ/1/

The event will fire whenever a new node was appended to the element on which you bind the handler.