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

方法：

DOM.replaceChild( newNode, oldNode )

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: solid;
        }
        div#d2{
            border-color: red;
        }
    </style>
</head>
<body>
    <button id="ipt">替换</button>
    <div id="d1"><span id="rep">一个span</span></div>
    <div id="d2"><span id="berep">被替换的span</span></div>
</body>
<script>
    var $ = s=>document.querySelectorAll(s);
    var [ ipt, d1, rep, d2, berep ] = [...$('[id]')];//请参考html中的id
    ipt.onclick = func=>{
        d2.replaceChild( rep , berep );//替换
    }
</script>
</html>

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

替换前

替换后

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: solid;
        }
        div#d2{
            border-color: red;
        }
    </style>
</head>
<body>
    <button id="ipt">替换</button>
    <div id="d1"><span id="rep">一个span</span></div>
    <div id="d2"><span id="berep">被替换的span</span></div>
</body>
<script>
    var $ = s=>document.querySelectorAll(s);
    var [ ipt, d1, rep, d2, berep ] = [...$('[id]')];
    ipt.onclick = func=>{
        d2.replaceChild( rep.cloneNode(true) , berep );//true代表连同子节点一起克隆
    }
</script>
</html>

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

QQ截图20171103165459.png

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

QQ截图20171103165504.png

原因在于：

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

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

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

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

推荐阅读更多精彩内容