How to intercept innerHTML changes in javascript?

Question

I need to capture any changes to the contents of a cell inside my web page.

The following code shows me that addEventListener is not working.

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"; 

Code is just a toy example. In my real case, the changes on the page (and therefore in the cell too) were made using webapp, with which I DO NOT control.

Answer 1

You cannot listen to the DOM change element this way. change event is mainly for input s

There are other new DOM 3 events that will help you with this.

Here are some of them:

DOMCharacterDataModified // Draft

DOMSubtreeModified

Answer 2

Is This The Most Effective DOM Change Detection / Monitoring Method? help?

It seems that there are no 100% cross-browser solutions, and one of the workarounds is to poll the elements of interest to see if their innerHTML.length has changed!