首页 > 编程笔记 > JavaScript笔记 阅读:2,169

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);  //把替换掉的一级标题插入到红盒子前面
}

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章