title: Mutation Observer only get specific content
body: <p>I have the following structure:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
     &lt;div class="col"&gt;left&lt;/div&gt;
     &lt;div class="col"&gt;middle&lt;/div&gt;
     &lt;div class="col"&gt;right&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to get the nodes ONLY if INSIDE $('.col') a div of class "block" is included like:</p>
  
  <p>YES for THIS:</p>
  
  <pre><code>$('.col')[1].append($('&lt;div class="block"&gt;urgent&lt;/div&gt;'));
  </code></pre>
  
  <p>but NO for THIS:</p>
  
  <pre><code>$('.col')[1].append($('&lt;div class="different"&gt;dontcare&lt;/div&gt;'));
  </code></pre>
  
  <p>my Observer looks like this:</p>
  
  <pre><code> var observer = new MutationObserver(function (mutations) {
          mutations.forEach(function (mutation) {
              for (var i = 0; i &lt; mutation.addedNodes.length; i++) {
                      console.log(mutation.addedNodes[i]);
                  }
              });            
          });
  
      observer.observe(document, {
          childList: true,
          subtree:true,
          characterData:true,
          attributes:true        
      });
  </code></pre>
  
  <p>I am inside a chrome extension, but that should not really matter </p>