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 MutationEvent s. MutationEvent s will be more performant for most scenarios as any poll vs interrupt implementations but compatibility sucks

Simple auto scrolling example using my shim