30

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.

tic
  • 4,009
  • 15
  • 45
  • 86
  • What browser type are you testing this in? Remember IE uses the non-standard .attachEvent() method. – Phil.Wheeler Sep 11 '11 at 21:16
  • 2
    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. – David Sep 11 '11 at 21:17

3 Answers3

37

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.

Community
  • 1
  • 1
legale
  • 612
  • 7
  • 9
  • Best answer, works even for iframe children – kungfooman Apr 17 '21 at 09:47
  • 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 – Ji_in_coding Apr 02 '23 at 13:57
10

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

Mohsen
  • 64,437
  • 34
  • 159
  • 186
  • 2
    unfortunately all Mutation Events are deprecated! is there any other magical event like DOMCharacterDataModified to listen to innerHTML value changes? – Rafe Oct 02 '17 at 13:28
1

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!

Community
  • 1
  • 1
Paul Grime
  • 14,970
  • 4
  • 36
  • 58