JavaScript DOM操作:replaceChild()方法详解与示例

作者:竹影

时间:2026-10-28

浏览:130

本文介绍JavaScript中replaceChild()方法的使用,该方法用于替换文档中的已有元素。通过示例代码演示如何获取父节点、创建新节点,并调用replaceChild将指定子节点替换为新节点,同时返回被替换的旧节点。

文章目录

replaceChild方法概述

replaceChild(a,b)用于替换文档中已存在的元素


参数a指定为待插入的节点


参数b指定为被替换的节点


JavaScript替换节点示例

代码如下:

 
var oDiv = document.getElementById("guoDiv");
var oSpan = document.createElement("span");
oSpan.innerHTML = "4";
var firsChild = oDiv.firstElementChild ? oDiv.firstElementChild : oDiv.firstChild
var returnNode = oDiv.replaceChild(oSpan, firsChild); //替换第一个元素,返回被替换掉的元素
alert(returnNode.innerHTML); //1
var lastChild = oDiv.lastElementChild ? oDiv.lastElementChild : oDiv.lastChild;
oSpan = document.createElement("span");
oSpan.innerHTML = "5";
returnNode = oDiv.replaceChild(oSpan, lastChild); //替换最后一个,返回被替换掉的元素
alert(returnNode.innerHTML);//3

HTML结构示例

代码如下:

 
<div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章