how to intercept innerHTML changes in javascript?

Question

I need to intercept any changes in the content of a cell inside my webpage.

The following code shows me that addEventListener does not work.

function modifyText() {
alert("!");
}

var el=document.getElementById("mycell");
el.innerHTML="a"
el.addEventListener("change", modifyText, false); 
// After next instruction I expect an alert message but it does not appear...
el.innerHTML="Z";

The code is just a toy example. In my real case the changes in the page (and therefore in the cell, too) are made by a webapp that I have NO control over.

Lubra

What browser type are you testing this in? Remember IE uses the non-standard .attachEvent() method. – Wakerobin

How are the changes happening in the first place? When you say "a web app" that implies to me a server-side application which builds and returns the page content. If that's the case then the change wouldn't be detectable by the JavaScript code because the "change" took place on the server before the scope of the JavaScript was even applicable. From the perspective of the JavaScript on the page, there was no change. – Mount

Answer 1

You can't listen to a DOM element change that way. change event is mostly for inputs

There is some other new DOM 3 events that would help you on this.

Here is some:

DOMCharacterDataModified //Draft

DOMSubtreeModified

Bigamy

unfortunately all Mutation Events are deprecated! is there any other magical event like DOMCharacterDataModified to listen to innerHTML value changes? – Virgule

Answer 2

There is a modern way to catch innerhtml changes:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

Example:

// identify an element to observe
elementToObserve = window.document.getElementById('y-range').children[0];

// create a new instance of 'MutationObserver' named 'observer', 
// passing it a callback function
observer = new MutationObserver(function(mutationsList, observer) {
    console.log(mutationsList);
});

// call 'observe' on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {characterData: false, childList: true, attributes: false});

childList mutation fires on innerHTML change.

Acceptance

Best answer, works even for iframe children – Feminacy

I wanted to monitor innerHTML changes, initially, I had a interval watching the innerHTML, but it is not very stable. After switching to this method, it run very smoothly. Thanks for the answer – Cannon

In the example above, if you want to observe the innerHTML for y-range itself then remove children[0] from the end. This works well for updating the options from one select when another changes its available options to enforce valid combinations. – Frisby

Answer 3

Does this Most efficient method of detecting/monitoring DOM changes? help?

It seems like there aren't any 100% cross browser solutions, and one of the workarounds is to poll the elements of interest to see if their innerHTML.length changes!

Dickey