Mutation Observer not creating mutations for nodes added through innerHTML

Adding internal nodes through innerHTML does not cause an addedNode in the mutation record for the internal node. For example: Let's suppose if we have a div element and have a Mutation Observer running observing the document

div.innerHTML = "<div><img></img></div>";

This would lead to just one addedNode in the mutation having "div" as the addedNode and "img" as one of the childNodes. But, there is no separate addedNode for "img" node added.

<html>
  <head>
    <script>
      var observer = new MutationObserver(function(mutations){
        for (var i=0; i < mutations.length; i++){
          var mutation = mutations[i];
          switch(mutation.type){
              case 'childList':
                    console.log(mutation);
                    break;
              default:
            }
        }
      });

      observer.observe(document.documentElement, {
        childList: true,
        subtree: true,
        attributes: true
      });
    </script>
  </head>
  <body>
    <div id="first">
      <div>
        <img></img>
      </div>
    </div>
    <div id="second">
    </div>
  </body>
  <script>
    console.log("-----------------");
    document.getElementById("second").innerHTML = "<div><img></img></div>";
  </script>
</html>

It just logs one addedNode in the mutation for the "second" div, though the HTML structure for both "first" and "second" div is same.

w3c / dom

Mutation Observer not creating mutations for nodes added through innerHTML #166