How To Monitor Element Changes On A UL Element In Javascript

I want to monitor a UL element for the changes in child elements such as li added or removed etc. The UL is used to display tabs in the screen where each li will be a separate tab.

Solution 1:

IE11 should support MutationObserver

Solution 2:

The only way i know for this to be possible would be like this. I cannot say that this is a very good way to do it though.

var onchange = function(element, callback) {
    var HTML = element.innerHTML;
    window.setInterval(function() {
        var newHTML = element.innerHTML;
        if(HTML !== newHTML) {
            HTML = newHTML;
            callback(element);
        }
    });
}

This will monitor the element and check the innerHTML if it has changed it will call your callback function.

Demo: http://jsfiddle.net/qmB97/

Usage:

onchange(HTMLElement, function() {
   alert('change');
});