Observe mutations on a target node that doesn't exist yet : <p>Is it possible to observer mutations on a DOM node that doesn't exist yet?</p>

<p><strong>Example:</strong></p>

<p>My app creates a div at some point: <code>&lt;div id="message" data-message-content="foo" data-message-type="bar" /&gt;</code>.</p>

<p>I want to watch for the creation &amp; change of this div. </p>

<pre><code>var mutationObserver = new MutationObserver(function(mutations){
  // Some code to handle the mutation.
});

mutationObserver.observe(
    document.querySelector('#message'),
        { 
            attributes: true, 
            subtree: true, 
            childList: true, 
            characterData: false 
        }
    );
);
</code></pre>

<p>Right now this returns an <strong>error</strong> since <code>#message</code> is null (the div hasn't been created yet).</p>

<p><code>Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.</code></p>

<p>An obvious solution is to watch the <code>body</code> and check if any of the mutations are the creation of <code>div#Message</code>, but this seems like a bad idea / or possibly bad for performance.</p>
