JS replaceChild()方法：替换节点

JavaScript replaceChild() 方法可以将某个子节点替换为另一个。用法如下：

nodeObject.replaceChild(new_node, old_node)

其中参数 new_node 为指定新的节点，old_node 为被替换的节点。如果替换成功，则返回被替换的节点；如果替换失败，则返回 null。

示例1

以上示例为基础重写脚本，新建一个二级标题元素并替换掉红色盒子中的一级标题元素。

var ok = document.getElementById("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red");  //获取红色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0];  //获取一级标题的引用
    var h2 = documeng.createElement("h2");  //创建二级标题元素并引用
    red.replaceChild(h2, h1);  //把一级标题替换为二级标题
}

演示发现，当使用新创建的二级标题替换一级标题之后，原来的一级标题所包含的标题文本已经不存在了。这说明替换节点的操作不是替换元素名称，而是替换其包含的所有子节点以及其包含的所有内容。

同样的道理，如果替换节点还包含子节点，则子节点将一同被插入到被替换的节点中。可以借助 replaceChild() 方法在文档中使用现有的节点替换另一个存在的节点。

示例2

在下面示例中使用蓝盒子替换掉红盒子中包含的一级标题元素。此时可以看到，蓝盒子原来显示的位置已经被删除显示，同时被替换元素 h1 也被删除。

var ok = document.getElementById("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red");  //获取红色盒子的引用
    var blue= document.getElementById("blue");  //获取蓝色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0];  //获取一级标题的引用
    red.replaceChild(blue, h1);  //把红盒子中包含的一级标题替换为蓝盒子
}

示例3

replaceChild() 方法能够返回被替换掉的节点引用，因此还可以把被替换掉的元素给找回来，并增加到文档中的指定节点中。针对上面示例，使用一个变量 del_h1 存储被替换掉的一级标题，然后再把它插入到红色盒子前面。

var ok = document.getElementById("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red");  //获取红色盒子的引用
    var blue= document.getElementById("blue");  //获取蓝色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0];  //获取一级标题的引用
    var del_h1 = red,replaceChild(blue, h1);  //把红盒子中包含的一级标题替换为蓝盒子
    red.parentNode.insertBefore(del_h1, red);  //把替换掉的一级标题插入到红盒子前面
}