方法：
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] )
网友评论