Mutation Observer for creating new elements

This is code that listens for mutations on the childlist of #foo and checks to see if a child with the id of bar is added. MutationObserver = window.MutationObserver || window.WebKitMutationObserver; $(“#foo”).live(“click”,function(e) { e.preventDefault(); $(this).append($(“<div />”).html(“new div”).attr(“id”,”bar”)); }); // define a new observer var obs = new MutationObserver(function(mutations, observer) { // look through all mutations … 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

How can I be notified when an element is added to the page?

Warning! This answer is now outdated. DOM Level 4 introduced MutationObserver, providing an effective replacement for the deprecated mutation events. See this answer to another question for a better solution than the one presented here. Seriously. Don’t poll the DOM every 100 milliseconds; it will waste CPU power and your users will hate you. Since … 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