title: MutationObserver detecting element appereance and changing of element's value
body: <p>I intend to use MutationObserver on observing the appearance and changing of element's value, but to be honest I'm not sure how this should be implemented.</p>
  
  <p><img src="https://i.imgur.com/UMMaJuY.png" alt=""></p>
  
  <p>The target of MO would be <code>div.player-bar</code> and what I'm trying to accomplish is to detect when <code>el-badge__content</code> appears in page and when <code>el-badge__content</code> element value is changed (for example instead <code>1</code> would change to <code>2</code>).</p>
  
  <p>Please note that <code>el-badge__content</code> appears at the same time with the creation of <code>div.new-bar</code> and many times <code>div.new-bar</code> would not be present in the page, that's why I need to listen to <code>div.player-bar</code>.</p>
  
  <p>Is this possible? So far I was thinking of something like this:</p>
  
  <pre><code>var target = document.getElementsByClassName('player-bar')[0];
  var config = { attributes: true, childList: true, subtree: true };
  
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      mutation.forEach(function(addedNode) {
        var e = addedNode.document.getElementsByClassName('el-badge__content')[0];
        if (e) {
          console.log("Element appearance/changed")
        };
      });
    });
  });
  
  observer.observe(target, config);
  </code></pre>
  
  <p>Thank you in advance.</p>