html节点操作与事件

<div id='a' style="width: 500px;height: 500px;background-color: grey;">
    
</div>
<a href="javascript:addEle();">添加</a>
<a href="javascript:bindEle();">绑定</a>
<a href="javascript:deleteEle();">删除</a>
<a href="javascript:recoverEle();">恢复</a>
<script type="text/javascript">
    var box = document.getElementById('a');
    var deletedEles = [];
    function addEle(){
        var ele = document.createElement('div');
        ele.classList.add('ele');
        var txt = document.createTextNode(new Date());
        ele.appendChild(txt);
        box.appendChild(ele);
    }
    function bindEle(){
        var eles = box.querySelectorAll('.ele');
        eles.forEach(function(ele,index){
            ele.addEventListener('click',function(){
                console.log(this.innerHTML);
            },false);
        });
    }
    function deleteEle(){
        var eles = box.querySelectorAll('.ele');
        eles.forEach(function(ele,index){
            deletedEles.push(ele.parentNode.removeChild(ele));
        });
    }
    function recoverEle(){
        deletedEles.forEach(function(ele,index){
            box.appendChild(deletedEles.shift());
        });
    }
</script>

点击恢复按钮，节点回到DOM树中，事件也恢复。

被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如上例中的oldChild来保存这个节点的引用. 如果使用上述语法中的第二种方法, 即没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的, 在短时间内将会被内存管理回收.

如果上例中的child节点不是node节点的子节点,则该方法会抛出异常.