Trigger a subtree Change
<p>How can I trigger a subtree change with MutationObserver?</p>

<h2>JavaScript</h2>

<pre><code>function mutate(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });
}

var target = document.querySelector('div#mainContainer');
var observer = new MutationObserver( mutate );
var config = { attributes: true, characterData: true, childList: true, subtree: true };

observer.observe(target, config);
</code></pre>

<h2>HTML</h2>

<pre><code>&lt;div id="mainContainer"&gt;
    &lt;h1&gt;Heading&lt;/h1&gt;
    &lt;p&gt;Paragraph.&lt;/p&gt;
    &lt;img src="http://i.stack.imgur.com/k7HT5.jpg" alt="Photo" id="photo" height="100"&gt;
&lt;/div&gt;
</code></pre>

<p>I can trigger an attribute change with:</p>

<pre><code>document.getElementById('photo').src = 'http://i.imgur.com/Xw6htaT.jpg';
</code></pre>

<p>I can trigger a characterData change with:</p>

<pre><code>document.querySelector('div#mainContainer p').innerHTML = 'Some other text.';
</code></pre>

<p>I can trigger a childList change with:</p>

<pre><code>jQuery('div#mainContainer').append('&lt;div class="insertedDiv"&gt;New &lt;div&gt;!&lt;/div&gt;');
</code></pre>

<p>How is a subtree change triggered so console.log(mutation.type); prints it out?</p>