Title: how to intercept innerHTML changes in javascript?
Tags: javascript;addeventlistener;interception
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.  

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

Comment: 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.

Here is the accepted answer: You can't listen to a DOM element ```change``` that way. ```change``` event is mostly for ```input```s

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

Here is some:

DOMCharacterDataModified  //Draft

DOMSubtreeModified

Comment for this answer: unfortunately all Mutation Events are deprecated! is there any other magical event like DOMCharacterDataModified to listen to innerHTML value changes?

Here is another answer: 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.

Comment for this answer: Best answer, works even for iframe children

Here is another answer: 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!


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2011:00:09/11/11', 'FavoriteCount': 8.0, 'PostTypeId': 1, 'Tags': '<javascript><addeventlistener><interception>', 'Title': 'how to intercept innerHTML changes in javascript?', 'ViewCount': 37826, 'id': 7381293, 'user_AboutMe': '<p>merge keep</p>\n', 'user_AccountId': 99497.0, 'user_DisplayName': 'tic', 'user_Reputation': 3729.0, 'user_Views': 267.0, 'user_id': 268721.0}}