DOM MutationObserver

Observe DOM mutations.

by Julien Etienne

HTML

<div id="some-id">
    <input type="button" value="Click" onclick="duplicate()" />
    <div></div>
</div>

CSS

#some-id>div {
    width: 1px;
    height: 1px;
    background: red;
    margin: 3px;
}

JavaScript

var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function (mutations) {
	console.log(mutations);
});

// configuration of the observer:
var config = {
    attributes: true,
    childList: true,
    characterData: true
};

// pass in the target node, as well as the observer options
observer.observe(target, config);


function duplicate() {
		for(let i = 0; i < 100; i++){
    	target.appendChild(document.createElement("DIV"));
    }
}