<div id="msg"></div>
<br />
<button>Show Msg</button>  

#msg {
  height: 40px;
  line-height: 40px;
  color: white;
  font-family: "courier new";
  text-align: center;
  font-weight: bold;
}

button {
  padding: 6px;
  font-family: "courier new";
  font-weight: bold;
}

var msg = document.querySelector('#msg'),
  SUCCESSMSG = "Changes Saved!";

/* Add button click event */
document
  .querySelector('button')
  .addEventListener('click', showMsg);

function showMsg() {
  msg.textContent = SUCCESSMSG;
  msg.style.background = 'teal';
}

(function startObservation() {
  var
  /* 1) Create a MutationObserver object*/
    observer = new MutationObserver(
      function(mutations) {
        mutationObserverCallback(mutations);
      }),
    /* 2) Create a config object */
    config = {
      childList: true
    };

  /* 3) Glue'em all */
  observer.observe(msg, config);
})();

function mutationObserverCallback(mutations) {
  /* Grab the first mutation */
  var mutationRecord = mutations[0];
  /* If a child node was added, 
     hide the msg after 2s  */
  if (mutationRecord.addedNodes[0] !== undefined)
    setTimeout(hideMsg, 2000);
}

function hideMsg() {
  msg.textContent = '';
  msg.style.background = 'none';
}