触发子树更改

Question

如何使用MutationObserver触发子树更改？

的JavaScript

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);

HTML

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

我可以通过以下方式触发属性更改：

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

我可以用：

触发characterData更改

document.querySelector('div#mainContainer p').innerHTML = 'Some other text.';

我可以使用以下命令触发childList更改：

jQuery('div#mainContainer').append('<div class="insertedDiv">New <div>!</div>');

如何触发子树更改，以便console.log（mutation.type）;将它打印出来？