Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<article>
  <p>See the console for information about what is going on.</p>
  <div id="container"></div>
  <div>
    <button onclick="addNode();">Add node</button>
    <button onclick="setAttr();">Add attribute</button>
    <button onclick="setContent();">Change content</button>
    <button onclick="removeNod();">Remove node</button>
    
  </div>
</article>
</body>
</html>
 
/*
* Adapted from http://www.michielvaneerd.nl/lab/mutationobserver/
*/
var container = document.getElementById("container");
​
var addNode = function() {
  if (container.hasChildNodes()) {
    alert("Node already added...");
    return;
  }
  var div = document.createElement("div");
  div.innerHTML = "<h1 title='The header'><span>Added node</span></h1>";
  container.appendChild(div);
};
​
var removeNod = function() {
  if (!container.hasChildNodes()) {
    alert("There is no node...");
    return;
  }
  container.removeChild(container.firstChild);
};
​
var setAttr = function() {
  if (!container.hasChildNodes()) {
    alert("There is no node...");
    return;
  }
  container.firstChild.querySelector("h1").setAttribute("title", "I am changed!");
};
​
var setContent = function() {
  if (!container.hasChildNodes()) {
    alert("There is no node...");
    return;
  }
  container.firstChild.querySelector("span").firstChild.data = "Someone changed me...";
};
​
if ("MutationObserver" in window) {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      var target = mutation.target;
      switch (mutation.type) {
        case "attributes":
          console.log("The attribute " + mutation.attributeName
            + " of the node " + target.nodeName
            + " changed from '" + mutation.oldValue + "'"
            + " to '" + target.getAttribute(mutation.attributeName) + "'");
        break;
        case "childList":
          Array.prototype.forEach.call(mutation.addedNodes, function(node) {
            console.log("Node " + node.nodeName + " added to " + target.nodeName);
          });
          Array.prototype.forEach.call(mutation.removedNodes, function(node) {
            console.log("Node " + node.nodeName + " removed from " + target.nodeName);
          });
        break;
        case "characterData":
          console.log("Content of " + target.nodeName + " changed from '" + mutation.oldValue + "' to '" + target.data + "'");
        break;
      }
    });
  });
  observer.observe(container, {
    childList : true,
    attributes : true,
    characterData : true,
    subtree : true,
    attributeOldValue : true,
    characterDataOldValue : true
  });
} else {
  container.addEventListener("DOMAttrModified", function(e) {
    console.log("The attribute " + e.attrName + " of the node "
      + e.target.nodeName + " (#" + e.target.id + ") changed from '" + e.prevValue
      + "' to '" + e.newValue + "'");
  }, false);
  container.addEventListener("DOMSubtreeModified", function(e) {
    console.log(e.type);
  }, false);
  container.addEventListener("DOMNodeInserted", function(e) {
    console.log("Node " + e.target.nodeName + " (#" + e.target.id + ") added to " + e.relatedNode.nodeName + " (#" + e.relatedNode.id + ").");
  }, false);
  container.addEventListener("DOMNodeRemoved", function(e) {
    console.log("Node " + e.target.nodeName + " (#" + e.target.id + ") removed from " + e.relatedNode.nodeName + "(#" + e.relatedNode.id + ").");
  }, false);
  container.addEventListener("DOMCharacterDataModified", function(e) {
    console.log("Content of " + e.target.nodeName + " (#" + e.target.id + ") changed from '" + e.prevValue + "' to '" + e.newValue + "'");
  }, false);
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
addyosmanipro
0viewers