How to call a js function when the content of a div changes (no jquery please)

Question

I am looking for a method to call a JavaScript function whenever the content of a specific element (i.e. div, span, p) is modified. I would imagine that there would be a standard event for it like onchange, but I know onchange does not work for divs and I cant seem to find one that does.

I've researched, but have only been able to find jQuery solutions to the problem.

[Mutation Observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) is maybe what you're looking for? — Teemu, Sep 01 '14 at 05:40
And what were the jQuery solutions you found? Also, I'm not sure how a `div` element can change on it's own. You must be using JavaScript to change it. Then insert whatever code you want in the same place where you are making changes to the `div`. — sampathsris, Sep 01 '14 at 05:41
Similiar question, already answered - http://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div — Tomor, Sep 01 '14 at 05:42
Additionally, on which basis would i get a downvote? Downvotes are for questions which are deemed unclear, or lacking research effort. I would suggest that whoever downvoted me show me which additional research I supposedly should have done, or how my question was in any way unclear. — user3791157, Sep 01 '14 at 05:53

Kevin Yue · Answer 1 · 2014-09-01T07:20:35.043

I think you can try MutationObserver, and in IE11-, you can use setInterval() for fallback.

UPDATE

Bellow is my answer.

var TextObserver = function () {
};

TextObserver.prototype.observe = function (target, callback) {
    var self = this;
    self.target = target;

    if (window.MutationObserver) {
        self.observer = new MutationObserver(function (mutations) {
            if (mutations.length) {
                var m = mutations[0];
                callback && callback(self.target.textContent, m.oldValue);
            }
        });

        self.observer.observe(self.target, {
            subtree: true,
            characterData: true,
            characterDataOldValue: true
        });
    } else { //for IE11-
        self._oldText = self.target.innerText;
        self.observer = setInterval(function () {
            var newText = self.target.innerText;
            if (self._oldText !== newText) { //changed
                callback && callback(newText, self._oldText);

                self._oldText = newText; //replace the old text;
            }
        }, 300);
    }

    return self;
};

new TextObserver().observe(document.getElementById('test'), function (newValue, oldValue) {
    alert('New value:' + newValue + '; oldValue: ' + oldValue);
});

You can view the whole demo on the jsfiddle.

Can you please elaborate the IE part of your answer? – Teemu Sep 01 '14 at 06:04 — Teemu, Sep 01 '14 at 06:04

score 1 · Accepted Answer · answered Sep 01 '14 at 07:08

In modern browsers you can use Mutation observers. In older browsers (practically IE9 - 10) there are Mutation Events. IE < 9 don't have corresponding event. In these browsers onpropertychange is fired after certain changes only.

An example of the Mutation Observer:

var observer = new MutationObserver(function (m) { // Creates an observer
        console.log(m);
    }),
    elem = document.getElementById('test');

observer.observe(elem, {childList: true}); // Registers the observer
setTimeout(function () {
    elem.textContent += ' This is an added part triggering Mutation Observer.';
}, 2000);

A live demo at jsFiddle.

How to call a js function when the content of a div changes (no jquery please)

2 Answers2