Mutation Observer for creating new elements

Question

I am trying to make a function go off when a particular div is created. In the simplest of terms, I have something like this:

<a href="" id="foo">Click me!</a> <script> $("#foo").live("click",function(e) {     e.preventDefault();     $(this).append($("<div />").html("new div").attr("id","bar")); }); </script> 

Before, I had mutation events listen for the creation of div#bar - something like this:

$("#bar").live("DOMNodeInserted", function(event) {     console.log("a new div has been appended to the page"); }); 

Is there an equivalent using Mutation Observers? I tried attrchange.js featured on Can you have a javascript hook trigger after a DOM element's style object changes? but that plugin only detects when an element has been modified, not when it's created.

Answer 1

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 that just occured     for(var i=0; i<mutations.length; ++i) {         // look through all added nodes of this mutation         for(var j=0; j<mutations[i].addedNodes.length; ++j) {             // was a child added with ID of 'bar'?             if(mutations[i].addedNodes[j].id == "bar") {                 console.log("bar was added!");             }         }     } });  // have the observer observe foo for changes in children obs.observe($("#foo").get(0), {   childList: true }); 

However, this only observes #foo. If you want to look for the addition of #bar as a new child of other nodes, you need to observe those potential parents with additional calls to obs.observe(). To observe a node with the id of baz, you might do:

obs.observe($('#baz').get(0), {   childList: true,   subtree: true }); 

The addition of the subtree option means that the observer will look for the addition of #bar as either a child or a deeper descendant (e.g. grandchild).