DOMNodeInserted / Removed polyfills (or similar events)

Question

I need a way to listen for changes when the node children are removed or added. I created an autoscroll plugin that keeps the item scrollable to the bottom when new items are added. The event I'm listening to is DOMNodeInserted and DOMNodeRemoved .

I searched for policies for DOMNodeInserted and DOMNodeRemoved . Looking around, I could not find any that already existed. The event is not supported in all browsers and is currently out of date . I have a simple (most likely naive) polyfill that I wrote quickly, but I doubt it works (well).

I know these events are out of date , but is there a better way to listen for changes to children?

 (function() { var works = false; var $test = document.createElement("div"); var $testchild = document.createElement("a"); $test.addEventListener("DOMNodeInserted", function() { works = true; }, false); $test.appendChild($testchild); if(!works) { var nodeproto = Node.prototype; var nativeAppend = nodeproto.appendChild; var nativeRemove = nodeproto.removeChild; nodeproto.appendChild = function() { nativeAppend.apply(this, arguments); this.fireEvent("DOMNodeInserted"); }; nodeproto.removeChild = function() { nativeRemove.apply(this, arguments); this.fireEvent("DOMNodeRemoved"); }; } })(); 

Answer 1

I ended up writing a reasonably compatible polyfill for MutationObserver using interval checks of the cloned childList (similar to what @plalx mentioned in his comments) instead of backtracking on MutationEvent s. MutationEvent will be more efficient for most scenarios than any polls against interrupt implementations, but compatibility sucks

A simple example of automatic scrolling using my pad