33

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.

2
  • What browser type are you testing this in? Remember IE uses the non-standard .attachEvent() method. Sep 11, 2011 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, 2011 at 21:17

3 Answers 3

40

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.

3
  • Best answer, works even for iframe children
    – kungfooman
    Apr 17, 2021 at 9: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 Apr 2, 2023 at 13:57
  • 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. Feb 5 at 22:54
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

1
  • 2
    unfortunately all Mutation Events are deprecated! is there any other magical event like DOMCharacterDataModified to listen to innerHTML value changes?
    – Rafe
    Oct 2, 2017 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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.