Search code examples
javascriptaddeventlistenerinterception

how to intercept innerHTML changes in javascript?

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.

Solution

  • 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