MutationObserver to check div height (mutation.type)
<p>I wish to listen to the height of a div using MutationObserver, it however isn't firing when I add text to the innerHTML of the element I am trying to observe.</p>

<p>html:</p>

<pre><code>&lt;button onclick="myFunction()"&gt;click me&lt;/button&gt;
&lt;div id="support"&gt;&lt;/div&gt;
&lt;div id="info"&gt;&lt;/div&gt;
&lt;div id="text"&gt;&lt;/div&gt;
</code></pre>

<p>js:</p>

<pre><code>var myFunction = function() {
  var tmp = document.getElementById('text').innerHTML;
  document.getElementById('text').innerHTML = tmp + "herro&lt;br&gt;";
};

if ("MutationObserver" in window) {
  document.getElementById('support').innerHTML = "MutationObserver supported";
  var observer = new MutationObserver(function (mutations) { // &lt;- this isn't firing
    mutations.forEach(function (mutation) {
      var tmp = document.getElementById('info').innerHTML;
      document.getElementById('info').innerHTML = tmp + mutation.type + "&lt;br&gt;";
    });
  });

  var observerConfig = {
    attributes: true,
    childList: true,
    characterData: true
  };
  nodes
  var targetNode = document.getElementById('text');
  observer.observe(targetNode, observerConfig);
}
</code></pre>

<p>codepen: <a href="http://codepen.io/basickarl/pen/xZXWoK?editors=101" rel="nofollow">http://codepen.io/basickarl/pen/xZXWoK?editors=101</a></p>

<p>I wonder what I am doing wrong.</p>