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>
  <title>polymer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
</head>
<body>
​
<dom-module id="x-test">
  <template>
    <h1>Mutation Observer Test</h1>
    <button on-tap="addTapped">Add Node</button>
    <button on-tap="removeTapped">Remove Node</button>
    <div id="insertion_point" style="color:red"></div>
    <div id="console_log"></div>
  </template>
</dom-module>
​
<script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-test',
      properties: {
        _mo: {type: Object, value: function () {return {};}}
      },
      ready: function () {
        // first, define the mutation observer.
        var t = this;
        this._mo = new MutationObserver(function (mutations) {
          // because mutations are "collected in intervals"
          mutations.forEach(function(mutation) {
            t.consoleLog("node added or removed detected");
            // add in your tasks when node is added/removed here
          });
        });
        // next, start observing.
        this._mo.observe(this.$.insertion_point, {
          // configure `childList` to be true to listen to node addition/deletion
          childList: true
        });
      },
      consoleLog: function (m) {
        var el = document.createElement("div");
        el.innerHTML = m;
        Polymer.dom(this.$.console_log).appendChild(el);
      },
      addTapped: function () {
        var el = document.createElement("span");
        el.innerHTML = "new node!";
        Polymer.dom(this.$.insertion_point).appendChild(el);
      },
      removeTapped: function () {
        var el = Polymer.dom(this.$.insertion_point).lastElementChild;
        Polymer.dom(this.$.insertion_point).removeChild(el);
      }
    });
  });
</script>
​
<x-test></x-test>
​
​
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers