DOMNodeInserted/Removed event polyfills (or similar events)

Question

I need a way to listen for changes for when a node's children are removed or added. I made an autoscrolling plugin that keeps an element scrolled to the bottom as new items are added. The event I'm listening to is DOMNodeInserted and DOMNodeRemoved.

I was looking for polyfills for DOMNodeInserted and DOMNodeRemoved. Looking around I wasn't able to find any that already existed. The event is not supported in all browsers and is currently deprecated.I have a simple (likely naive) polyfill I wrote quickly but I doubt it works (well).

I know these events are deprecated, but is there a better way to listen for element children changes?

(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 compliant polyfill for MutationObserver using interval checks of a cloned childList (similar to what @plalx mentioned in his comments) instead of falling back on the MutationEvents. MutationEvents will be more performant for most scenarios as any poll vs interrupt implementations but compatibility sucks

Simple auto scrolling example using my shim