GTS Joe GTS Joe - 1 month ago 9
jQuery Question

Mutation Observer Not Detecting Text Change

I'm scratching my head as to why MutationObserver doesn't detect text changes done using textContent.

HTML



<div id="mainContainer">
<h1>Heading</h1>
<p>Paragraph.</p>
</div>


JavaScript



function mutate(mutations) {
mutations.forEach(function(mutation) {
alert(mutation.type);
});
}

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

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

observer.observe(target, config);
});


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

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

Why does MutationObserver detect innerHTML but not textContent?

Here is the JS Fiddle:

https://jsfiddle.net/0vp8t8x7/

Notice that you'll only get alerted if you change textContent to innerHTML.

Answer

Each of them trigger a different change, and your observer configuration is not configured to observe the changes made by textContent.

textContent changes the child text node of the target. According to MDN setting textContent:

Setting this property on a node removes all of its children and replaces them with a single text node with the given value.

While innerHTML changes the the element itself, and it's subtree.

So to the catch innerHTML you use:

var config = { characterData: true, attributes: false, childList: false, subtree: true };

While to catch textContent use:

var config = { characterData: false, attributes: false, childList: true, subtree: false };

Demo:

function mutate(mutations) {
  mutations.forEach(function(mutation) {
    alert(mutation.type);
  });
}

  setTimeout(function() {
    document.querySelector('div#mainContainer > p').textContent = 'some other text.';
  }, 2000);
  
  var target = document.querySelector('div#mainContainer > p')
  var observer = new MutationObserver( mutate );
  var config = { characterData: false, attributes: false, childList: true, subtree: false };

  observer.observe(target, config);
<div id="mainContainer">
  <h1>Heading</h1>
  <p>Paragraph.</p>
</div>