detect div change in javascript

Question

I'm working on a small chrome extension for fun, and one thing I need it to be able to do, is to detect when the text inside a div is changed by the webpage itself.The code I'm using is:

var status = document.getElementById("status").innerHTML;
status.onchange = function() {
    console.log("CHANGE DETECTED")

And this doesn't seem to work, so what should I use instead?

NOTE: I'd prefer not to use jquery, as I am not even very proficient with javascript at the moment, but if it would be that much simpler/easier, that would be fine.

kishan · Accepted Answer · 2015-04-02 05:09:41Z

9

use this trick

source:https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

// select the target node
    var target = document.querySelector('#some-id');

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            console.log(mutation.type);
        });
    });

    // configuration of the observer:
    var config = { attributes: true, childList: true, characterData: true }

    // pass in the target node, as well as the observer options
    observer.observe(target, config);

    // later, you can stop observing
    observer.disconnect();

answered Apr 2, 2015 at 5:09

kishan

4663 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Touffy · Accepted Answer · 2015-04-02 05:26:41Z

3

You can't do what you want using change event. On newer browsers, you can use Mutation Observers. On older browsers... well, you ask people to upgrade to newer browsers. :P

edited Apr 2, 2015 at 5:26

Touffy

6,63626 silver badges31 bronze badges

answered Apr 2, 2015 at 5:05

Amadan

200k23 gold badges252 silver badges321 bronze badges

3 Comments

Amadan Over a year ago

Thanks @Touffy, that was a pretty funny derp.

Touffy Over a year ago

Yeah, considering the whole idea of observers is to not behave like the mutation events they replaced.

Amadan Over a year ago

@Touffy: Yup. I even linked the correct page, then failed on the link text. :P

Collectives™ on Stack Overflow

detect div change in javascript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related