CODEWITHSUNDEEP
javascriptdom-events
user160820
user160820

Reputation: 15220

Observing contents of a specific DIV

Is there a way to observe the contents of a specific DIV, I want to call a function as soon as the contents of the DIV are changed.

This can be a innerHTML replace, a page load.

Upvotes: 1

Views: 270

Answers (3)

gblazex
gblazex

Reputation: 50109

In modern browsers you can use DOM mutation events like DOMSubtreeModified, DOMCharacterDataModified. In IE you've got onchange event which you can use. For all the other browsers you can set up a timer for checking if the content has been changed.

Upvotes: 2

BrunoLM
BrunoLM

Reputation: 100361

You can check the contents of the element comparing to the previous value.

Retrieve the element to watch

var div = document.getElementById("w");

Create a watcher:

var w1 = { watch: null, prev: div.innerHTML };

Start the watcher. Each 100ms it will compare the previous value to the current value, if it's different it will update the value and trigger any actions.

function Watch(w, e)
{
    w.watch = setInterval(function() {
       if (e.innerHTML != w.prev)
       {
           w.prev = e.innerHTML;
           alert("changed");
       }
    }, 100);
}

Watch(w1, div);

See this example on jsFiddle.

Upvotes: 2

Roman
Roman

Reputation: 10403

In this page, it says that DIVs should fire OnChange when their content is modified.

Observing a div for change is not an effective technique. Have you looked into getting the code that changes the DIV's content to trigger and event?

Alternatively you could set a timer that monitors changes in your div and triggers some event.

Upvotes: 0

Related Questions