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.

html:

<button onclick="myFunction()">click me</button>
<div id="support"></div>
<div id="info"></div>
<div id="text"></div>

js:

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

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

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

codepen:

I wonder what I am doing wrong.

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.

html:

<button onclick="myFunction()">click me</button>
<div id="support"></div>
<div id="info"></div>
<div id="text"></div>

js:

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

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

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

codepen: http://codepen.io/basickarl/pen/xZXWoK?editors=101

I wonder what I am doing wrong.

• javascript
• html
• css

• 9 Mutation observers are not a way to detect changes to things like automatic heights. They are used to detect additions, deletions, and modifications to the DOM, including elements and attributes. Your code is not detecting the change in height; it's detecting the addition of a child. – user663031 Commented Jan 17, 2016 at 17:05

2 Answers 2

MutationObserver doesn't work for automatic height changes - it's for attribute/DOM changes/modifications. But ResizeObserver is designed for exactly this use case:

new ResizeObserver(function() {
  console.log("height of yourElement changed to:", yourElement.offsetHeight);
}).observe(yourElement);

It's supported in all modern browsers: https://caniuse./resizeobserver

The console showed: Uncaught ReferenceError: nodes is not defined

Removing the nodes line fixed it for me: http://codepen.io/anon/pen/jWGdqO?editors=101

Good luck!