DOM：替换结点

查看其它DOM相关文章：

DOM：克隆标签

parentNode.replaceChild( newChild , oldChild );

 用newChild结点去替换 oldChild 结点。 这个 newChild结点可以是动态创建的。

如果 newChild 结点，是已经存在的结点。那么，newChild , oldChild必须是兄弟关系。整个方法是它们 的父节点的方法。

ps：其实从方法名就可以看出来，是 replaceChild。替换子节点。

举例1：动态生成的节点替换已经存在的节点。

  <div id="box">
        这是box
    </div>

    <div id="box2">
        这个是box2
    </div>

<script>
    let  box = document.getElementById("box");
    let  box2 = document.createElement("p");
    box2.innerHTML = "xxx";
    document.body.replaceChild( box2,box);
</script>

举例2：已经存在的节点A替换已经存在的节点B。 

  <div id="box">
        这是box
    </div>
    <div id="box2">
        这个是box2
    </div>

    <div id="box3">
        这个是box3
    </div>

<script>
    let  box = document.getElementById("box");
    let  box3= document.getElementById("box3");
    document.body.replaceChild( box3,box);
</script>

PS:这个例子当中，box3会替换掉box，同时box3会进行移动，而不是克隆一个出来。所以，结果只会是：

 <div id="box3">
        这是box3
 </div>
 <div id="box2">
        这个是box2
 </div>