DOM Mutation event in JQuery or vanilla Javascript

This is certainly a hack, but why not patch the underlying DOM methods used to insert the nodes? There are a couple ways to do this: A. You know what specific element will be appended to: var c = document.getElementById(‘#container’); c.__appendChild = c.appendChild; c.appendChild = function(){ alert(‘new item added’); c.__appendChild.apply(c, arguments); } fiddle demo for … Read more

is there an alternative to DOMAttrModified that will work in webkit

Although Chrome does not dispatch DOMAttrModified events, the more lightweighted mutation observers are supported since 2011 and these work for attribute changes, too. Here is an example for the document body: var element = document.body, bubbles = false; var observer = new WebKitMutationObserver(function (mutations) { mutations.forEach(attrModified); }); observer.observe(element, { attributes: true, subtree: bubbles }); function … Read more

DOM mutation events replacement

The reason that mutation events was deprecated was because of huge performance issues. The replacement is Mutation Observers, look at and Information about mutations is delivered to observers as an ordered sequence of MutationRecords, representing an observed sequence of changes that have occurred Sample usage: var observer = new MutationObserver(function(mutationRecords) { // Handle … Read more

How to change the HTML content as it’s loading on the page

The docs on MDN have a generic incomplete example and don’t showcase the common pitfalls. Mutation summary library provides a human-friendly wrapper, but like all wrappers it adds overhead. See Performance of MutationObserver to detect nodes in entire DOM. Create and start the observer. Let’s use a recursive document-wide MutationObserver that reports all added/removed nodes. … Read more

Detect changes in the DOM

Ultimate approach so far, with smallest code: (IE11+, FF, Webkit) Using MutationObserver and falling back to the deprecated Mutation events if needed: (Example below if only for DOM changes concerning nodes appended or removed) var observeDOM = (function(){ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; return function( obj, callback ){ if( !obj || obj.nodeType !== 1 … Read more