Observe mutations on a target node that doesn’t exist yet

Only an existing node can be observed. But don’t worry, since getElementById is insanely fast compared to enumeration of all mutations’ added nodes, waiting for the element to appear won’t be taxing at all as you will see in Devtools -> Profiler panel. function waitForAddedNode(params) { new MutationObserver(function(mutations) { var el = document.getElementById(params.id); if (el) … Read more

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