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() {

var el=document.getElementById("mycell");
el.addEventListener("change", modifyText, false); 
// After next instruction I expect an alert message but it does not appear...

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.

There is a modern way to catch innerhtml changes:


// 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) {

// 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.

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


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!

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   How to access variables set using app.set() in express js

Similar Posts