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
To understand what is going on is necessary to clear up the difference between attribute (content attribute) and property (IDL attribute). I won’t expand on this as in SO there are already excellent answers covering the topic: Properties and Attributes in HTML .prop() vs .attr() What is happening behind .setAttribute vs .attribute=? When you change … Read more
To bring this up to date, the DOM4 standard does away with Mutation Events and replaces them with Mutation Observers: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
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
This answer primarily applies to big and complex pages. If attached before page load/render, an unoptimized MutationObserver callback can add a few seconds to page load time (say, 5 sec to 7 sec) if the page is big and complex (1, 2). The callback is executed as a microtask that blocks further processing of DOM … Read more
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
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