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");
};
}
})();
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