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

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