Using MutationObserver to detect when a div has been appended to an element

by jorgeluis

HTML

<h1>Using MutationObserver to detect when a div has been appended to an element.</h1>
<p>Open console to see result. </p>

<div id="container"></div>
<hr>
<button>Add node</button>

JavaScript

var container = document.getElementById("container");

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var target = mutation.target;
    Array.prototype.forEach.call(mutation.addedNodes, function(node) {
      console.log("Node " + node.nodeName + " added to " + target.nodeName);
    });
  });
});
observer.observe(container, {
  childList : true
});



var addNode = function() {
  var div = document.createElement("div");
  div.innerHTML = "<p>A node</p>";
  container.appendChild(div);
};

var b = document.querySelector('button');
b.addEventListener('click', function() {
	addNode();
})