Detect div change

[zegames]

Hi people,

How to I can detect if a div was changed after the page loaded?

E.g. by innerHTML function.

ps: onChange not is valid for tag div. Reference here on w3c.

Thanks!

[Airshow]

My immediate thought is that you could md5(innerHTML onload) your div's and store the reult (as a JavaScript variable). Then, whenever you need to know if the div's contents have changed, compare md5(current innerHTML) with the stored md5.

Md5 would be a cheap way to store a representation of innerHTML without needing to store inneHTML itself. Even cheaper would be innerHTML.length but a subsequent comparison would be significantly less reliable unless you can make length assumptions about your div's contents.

Of course, with these techniques no event will fire as it would if onchange were available so you would need to code it somehow differently.

If you don't know what md5 is, then try an internet search (Google, Alta Vista etc).

Airshow

[zegames]

Airshow, the problem still... window.onload = function () { someVar = document.getElementById('myDiv').innerHTML.length; }; //or md5 like you suggested. Right, done.

Now I need to compare length after the div content change?

How to?

[Airshow]

Zeg,

Now I need to compare length after the div content change?

That is indeed your problem.

Because onchange is not available, you have no alternative than to perform the comparison :

• in response to some other event (eg. user event(s) or by setInterval polling).
• synchronously, in each piece of code that can change the contents of your div.

Airshow

[Fest3er]

Hi people,

How to I can detect if a div was changed after the page loaded?

E.g. by innerHTML function.

ps: onChange not is valid for tag div. Reference here on w3c.

Thanks!

If you have control of the entire page, then the content of a div should change only under program control, under your control. Thus when your program changes the content, it should then call the respective 'onchange' function.

If your program is less deterministic, you'll have to use a background function that periodically checks all your divs of interest. If you are clever, you may be able to add an md5() method to each div; this method returns the md5sum of the innerHTML content; you should also add the original_md5sum value to each div. (Remember, this is ECMAScript: highly flexible. The DOM isn't necessarily etched in stone.)

So, onload:

• add static original_md5sum to each div of interest of the respective innerHTML content
• start a function in the background that periodically checks all the divs of interest for change. It either computes the div's innerHTML md5sum compares that with the static original sum.

For background functions, look into interval timers.