首页 > 编程笔记 > JavaScript笔记
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); //把替换掉的一级标题插入到红盒子前面 }
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算