Mutation Observer Not Detecting Text Change : <p>I'm scratching my head as to why MutationObserver doesn't detect text changes done using textContent.</p>

<h2>HTML</h2>

<pre><code>&lt;div id="mainContainer"&gt;
  &lt;h1&gt;Heading&lt;/h1&gt;
  &lt;p&gt;Paragraph.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<h2>JavaScript</h2>

<pre><code>function mutate(mutations) {
  mutations.forEach(function(mutation) {
    alert(mutation.type);
  });
}

jQuery(document).ready(function() {
  setTimeout(function() {
    document.querySelector('div#mainContainer &gt; p').textContent = 'Some other text.';
  }, 2000);

  var target = document.querySelector('div#mainContainer &gt; p')
  var observer = new MutationObserver( mutate );
  var config = { characterData: true, attributes: false, childList: false, subtree: true };

  observer.observe(target, config);
});
</code></pre>

<p>In the above script, the paragraph element's text content clearly changes but MutationObserver doesn't detect it.</p>

<p>However, if you change textContent to innerHTML, you will be alerted that the "characterData" has changed.</p>

<p>Why does MutationObserver detect innerHTML but not textContent?</p>

<p>Here is the JS Fiddle:</p>

<p><a href="https://jsfiddle.net/0vp8t8x7/" rel="noreferrer">https://jsfiddle.net/0vp8t8x7/</a></p>

<p>Notice that you'll only get alerted if you change textContent to innerHTML.</p>
