Trigger an event when a div is populated/visible
<p>I want to trigger an event once a DIV is populated from the back, 2 nodes are inserted in my DIV. I'm using this:</p>

<pre><code>$(function () {
    var xml = document.querySelector('#XML');

    xml.addEventListener("DOMNodeInserted", function (ev) {  
        doSomething();
    }, false);
});
</code></pre>

<p>This works when the XML div is populated once the doc is loaded or reloaded. 
At some point, the user clicks a button and the div#XML is populated dynamically without a reload and even though a DOM node is inserted into my element, nothing happens.  </p>

<p>How can I trigger "doSomething()" when my div changes? </p>