MutationObserver example

HTML

<input id="target" value="bj"/>
<br />
<button id="addBtn">Add element</button>
<button id="changeAttributeBtn">Add Attribute</button>
<br />
<br />
<div class="console"></div>

CSS

#target {
    border: 1px solid red;
    padding:5px;
}

.console {
    border: 1px solid lightgrey;
    padding:5px;
}

JavaScript

// select the target node
var target = document.getElementById('target');

var addBtn = document.getElementById('addBtn');
var changeAttributeBtn = document.getElementById('changeAttributeBtn');

target.addEventListener('input', blabla());

changeAttributeBtn.addEventListener('click', blabla());

function blabla() {
    target.setAttribute('foo','bazbaz');
}


// create an observer instance
var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        console.log(mutation);
        alert("ok");
        
        var p = document.createElement("p");
        p.innerHTML = "type: " + mutation.type + "<br />" +
            "target id: " + mutation.target.id + "<br />" +
            "target attribute foo: " + mutation.target.attributes['foo'].value + "<br />";
            
        document.querySelector('.console').appendChild(p);
    });
});

// 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();