let mList = document.getElementById('myList'),
    btnChild = document.querySelector('.btnChild'),
    btnStart = document.querySelector('.btnStart'),
    btnStop = document.querySelector('.btnStop'),
    options = {
      childList: true
    },
    observer = new MutationObserver(mCallback),
    myRecords;

function mCallback(mutations) {
  for (let mutation of mutations) {
    if (mutation.type === 'childList') {
      console.log('Mutation Detected: A child element has been added or removed.');
    }
  }
}

function doLogAndBtn(msg) {
  console.log(msg);
  btnStart.disabled = !btnStart.disabled;
  btnStop.disabled = !btnStop.disabled;
}

btnStart.addEventListener('click', function () {
  observer.observe(mList, options);
  doLogAndBtn('Observing for mutations: STARTED');
}, false);

btnChild.addEventListener('click', function () {
  if (document.querySelector('.child')) {
    mList.removeChild(document.querySelector('.child'));
  } else {
    mList.insertAdjacentHTML('beforeend', '\n<li class="child">Peaches</li>');
  }
  myRecords = observer.takeRecords();
}, false);

btnStop.addEventListener('click', function () {
  observer.disconnect();
  if (myRecords) {
    console.log(`${myRecords[0].target} was changed using the ${myRecords[0].type} option.`);
  }
  doLogAndBtn('Observing for mutations: STOPPED');
}, false);