MutationObserver — only do something if nodes added, not removed

Question

I have a MutationObserver that I'm using like so—

var config = {
  attributes: false,
  childList: true,
  characterData: false,
  subtree: true
};

var observer = new MutationObserver(function(mutations) {
  //need to call function1() only when nodes are ADDED, not removed
});

var startObserving = function () {
  target = document.getElementsByClassName("message-container")[0];
  observer.observe(target, config);
}

I need to both add and remove elements to/from the container that the MutationObserver is watching, but I only want to execute function1() when nodes are added. Is there a way to do this? I've been reading the MDN article but can't think of a way to do this. Any help would be appreciated!

Answer 1

You should be able to check the addedNodes property on each of the mutations object to determine if elements were added. You’ll probably also want to validate that the type is childList.

Check out the MutationRecord page on the MDN.

Something like

var observer = new MutationObserver(function(mutations) {
  var hasUpdates = false;

  for (var index = 0; index < mutations.length; index++) {
    var mutation = mutations[index];

    if (mutation.type === 'childList' && mutation.addedNodes.length) { 
      hasUpdates = true;

      break;
    }
  }

  if (hasUpdates) {
    function1();
  }
});