demos/dom.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dom-Leakage</title>
</head>
<body>
  <input type="button" value="add" class="add">
  <input type="button" value="remove" class="remove" style="display:none;">

  <div class="container">
    <pre class="wrapper"></pre>
  </div>
  <script>
    // 因为要多次用到pre.wrapper、div.container、input.remove、input.add节点，将其缓存到本地变量中，
    var wrapper = document.querySelector('.wrapper');
    var container = document.querySelector('.container');
    var removeBtn = document.querySelector('.remove');
    var addBtn = document.querySelector('.add');
    var counter = 0;
    var once = true;
    // 方法
    var hide = function(target){
      target.style.display = 'none';
    }
    var show = function(target){
      target.style.display = 'inline-block';
    }
    // 回调函数
    var removeCallback = function(){
      removeBtn.removeEventListener('click', removeCallback, false);
      addBtn.removeEventListener('click', addCallback, false);
      hide(addBtn);
      hide(removeBtn);
      container.removeChild(wrapper);
     
      // wrapper = null;//在执行删除操作时，将wrapper对pre节点的引用释放掉
    }
    var addCallback = function(){
      wrapper.appendChild(document.createTextNode('\t' + ++counter + '：a new line text\n'));
      // 显示删除操作按钮
      if(once){
        show(removeBtn);
        once = false;
      }
    }
    // 绑定事件
    removeBtn.addEventListener('click', removeCallback, false);
    addBtn.addEventListener('click', addCallback, false);
  </script>
</body>
</html>