Watch a value and log it

by Graham Fairweather

HTML

<button id="button">Click me</button>
<ul id="watch"></span>

JavaScript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/* global global */

(function (global) {
    "use strict";

    if (typeof global.MutationObserver !== "function") {
        global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver;
    }
    
    var watch = document.getElementById("watch");

    function whenClicked() {
        var li = document.createElement("li");
        
        li.textContent = "List element";
        watch.appendChild(li);
    }

    document.getElementById("button").addEventListener("click", whenClicked, false);

    if (typeof global.MutationObserver !== "function") {
        watch.addEventListener("DOMNodeInserted", function (evt) {
            console.log("New element detected", evt.target);
        }, false);
    } else {
        var observer = new global.MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.type === 'childList') {
                    console.log("New element detected", mutation.addedNodes[0]);
                }
            });
        });

        observer.observe(watch, {
            childList: true,
            characterData: true,
            subtree: true
        });
    }
}(window));