CODEWITHSUNDEEP
javascripthtml
Top Dog
Top Dog

Reputation: 53

Why MutationObserver doesn't make a callback

What could be a reason why the following code doesn't fire MutationObserver callbacks ?

<!DOCTYPE html>
<body>
  <div id="msg">Hello</div>
  <script>
    var el = document.getElementById("msg");
    var obs = new MutationObserver(() => {
      console.log("Changed!");
    });
    obs.observe(el, {subtree: true, characterData: true});
    setTimeout(() => {
        el.innerHTML += " World!";
    }, 3000);
  </script>
</body>
</html>

Upvotes: 1

Views: 22

Answers (1)

JMP
JMP

Reputation: 4467

innerHTML alters the DOM, so you need to monitor childList.

<!DOCTYPE html>
<body>
  <div id="msg">Hello</div>
  <script>
    var el = document.getElementById("msg");
    var obs = new MutationObserver(() => {
      console.log("Changed!");
    });
    obs.observe(el, {childList: true});
    setTimeout(() => {
        el.innerHTML += " World!";
    }, 3000);
  </script>
</body>
</html>

Upvotes: 2

Related Questions