title: How to manipulate html with mutation observer
body: <p>What i am trying to do is observe the generation of a page (inside an iframe, but it does not seem to matter) using mutation observer and modify it on the fly.</p>
  
  <p>I was able to modify the css without problem but i can't seem to be able to change html code, here is a sample code:</p>
  
  <pre class="lang-js prettyprint-override"><code>var mutationObserver = new MutationObserver (mutationHandler);
  var observerConfig = {childList: true, subtree: true};
  mutationObserver.observe(document, observerConfig);
  
  function mutationHandler(mutationRecords) {
      mutationRecords.forEach ( function (mutation) {
          var newNodes = mutation.addedNodes;
          if (newNodes.length &gt; 0) {
              $(newNodes).each(function() {
                  var $node = $(this);
                  if ($node.is('div')) {
                      var code = $node.html();
                      $node.html(code); // HERE IS THE TEST LINE !!!!
                  }      
              });
          }
      });
  }
  </code></pre>
  
  <p>So i placed a simple test line to see how it behave and by simply doing that -- getting the html code from the div and then putting it back as is -- part of the page will just not be generated (almost all of it).</p>
  
  <p>I am at an impasse as to why and what cause this, i am obviously missing something, getting the html using <code>var code = $node.html();</code> make something that can not be used back directly.</p>