JavaScript 替换节点

■知识点

replaceChildO方法可以将某个子节点替换为另一个。其用法如下：

    nodeObject.replaceChild(new_node,old_node)

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

■实例设计

【示例1】重写脚本，新建一个二级标题元素，并替换掉红盒子中的一级标题元素。

var ok = document.getElementByld("ok") ;                        //获取按钮素的引用

ok.onclick = function(){                                                        //为按钮注册一个鼠标单击事件处理函数

    var red = document.getElementByld ("red") ;                   //获取红盒子的引用

    var h1 = document.getElementsByTagName ("h1"）[0];  //获取一级标题的引用 

    var h2 = document.createElement ("h2");                        //创建二级标题兀素，并引用

    red. replaceChild (h2, h1);                                                //把一级标题替换为二级标题

}

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

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

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

var ok = document. getElementByld("ok");                       //获取按钮兀素的引用

ok.onclick = function(){                                                       //为按钮注册一个鼠标单击事件处理函数

    var red = document.getElementByld ("red")               //获取红盒子的引用

    var blue = document.getElementByld ("blue");                //获取蓝盒子的引用

    var hi = document.getElementsByTagName ("hi"）[0];   //获取一级标题的引用

    red.replaceChild (blue,hi);                                               //把红盒子中包含的一级标题替换为蓝盒子

}

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

var ok = document.getElementByld ("ok");                     //获取按钮元素的引用

ok.onclick = function (){                                                     //为按钮注册一个鼠标单击事件处理函数

    var red = document.getElementByld("red");             //获取红盒子的引用

    var blue = document.getElementByld("blue");              //获取蓝盒子的引用

    var hi = document.getElementsByTagName("hi")[0];    //获取一级标题的引用

    var del_hl = red. replaceChild (blue, hi);                    //把红盒子中包含的一级标题替换为蓝盒子

    red.parentNode. insertBefore (del_hl, red);            //把替换掉的一级标题插入到红盒子前面