使用DOM.replaceChild需要注意的一些问题

方法：

DOM.replaceChild( newNode, oldNode )

该DOM对象的方法接受2个参数，第一个代表新DOM节点，第二个代表要被替换的节点，其中第二个参数必须是该DOM的子元素

    
    
    


    替换
    
一个span
    
被替换的span

需要注意的是：在函数调用以后，如果newNode在DOM树中，newNode就会移动到该DOM元素的子节点

替换前

替换后

如果要保留原节点，请用cloneNode()方法

    
    
    


    替换
    
一个span
    
被替换的span

点击第一次，没什么问题：

QQ截图20171103165459.png

然而点击第二次，就会报错：

QQ截图20171103165504.png

原因在于：

d2.replaceChild( rep.cloneNode(true) , berep );

中的berep已经被替换，不再是d2的子节点了
若想保证脚本正常运行，需要传入d2当前的子节点而非被替换掉的berep

d2.replaceChild( rep.cloneNode(true) , d2.children[0] )