can I monitor changes on an HTML DIV?

Question

I am working on a complex web app.

In it, there is a div which gets updated. It prints something like

[1/4]
[2/4]
[3/4]
[4/4]

Prob

Answer 1

You might be able to use Mutation Events to do this if the browsers you are targeting support them. Here is a small jsFiddle demo that should work in a browser that supports the Mutation Events. I tested this in Chrome 23

JavaScript:

var observable = document.getElementById('observable');

observable.addEventListener('DOMSubtreeModified', function(ev) {
  console.log(ev.target.nodeValue, ev.timeStamp);
}, false);

var i = 0;

observable.addEventListener('click', function(ev) {
    observable.innerHTML = ++i;
    return false;
}, false);​

HTML:

​<div id="observable">click me and look at the console</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​#observable {
    background-color:lightblue;
    height:42px;
}​