首页 > 编程笔记 > JavaScript笔记
阅读:70
JS replaceChild()方法:替换节点
JavaScript replaceChild() 方法可以将某个子节点替换为另一个。用法如下:
同样的道理,如果替换节点还包含子节点,则子节点将一同被插入到被替换的节点中。可以借助 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); //把替换掉的一级标题插入到红盒子前面 }
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频