方法：
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] )
