MutationObserver

by Jose A

HTML

<div id="observe">


</div>
<div id="observe2">

</div>
<input type="button" value="Add New Paragraph">
<br/> 
<input type="text" id="text" value="Nothing" readonly />

JavaScript

var div = document.querySelector('#observe');
var div2 = document.querySelector('#observe2');
var text = document.getElementById('text');


function insert(){
	var elem = document.createElement('p');
  var elem2 = document.createElement('p');
  elem.innerHTML = `This is paragraph #${div.childNodes.length}`;
	elem2.innerHTML = 'This is the archtype';
  
  div.appendChild(elem);
  div2.appendChild(elem2);

}

document.querySelector('[type=button]').addEventListener('click', insert);

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
 console.log("Mutations:",mutations);
 mutations.forEach(function(mutation) {
  text.value = div.childNodes.length; 
  });
});

var observeText = new MutationObserver(function(mutations){
	mutations.forEach(function(mutation){
  	console.log("Text has changed!");
  })
});

observer.observe(document.querySelector('#observe'), { childList: true , attributes: true});
observer.observe(div2,{childList: true});
//console.log(insertedNodes);


observeText.observe(text, {attributes: true});