JavaScript HTML DOM replaceChild替换子节点

最新推荐文章于 2024-06-09 00:30:00 发布

编程界小明哥

最新推荐文章于 2024-06-09 00:30:00 发布

阅读量2k

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dkm123456/article/details/111287202

版权

javascript 专栏收录该内容

78 篇文章 27 订阅

订阅专栏

replaceChild方法用新节点（新创建的节点或者已经存在的节点）替换某个子节点。

语法：

replaceChild(newnode,oldnode);
newnode 新节点 oldnode 要替换的节点

1.用已有的节点去替换

 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <style>
        *{
        	margin:5px;
        	padding:0;
        }
        #box{
        	border:1px solid blue;
        	width:300px;
        	height:200px;
        }
        #box1{
        	position:absolute;
        	left:50%;
        	top:0;
        	border:1px solid blue;
        	width:300px;
        	height:200px;
        }
        
        </style>
        </head>
        <body>
        	<div id="box"></div>
        	
        	<button onclick='add()'>添加元素</button>
        	<button onclick='do_replace()'>用第一个元素去替换box1的最后一个元素</button>
        	<div id="box1" >
        	</div>
        </body>
<script>
	var i=1;
	var box = document.getElementById("box");
	function add(){
		//创建元素box的子元素
		var p = document.createElement("p");
			p.innerText='这是box的P元素'+(i++);
			
			box.appendChild(p);
   }
   //默认给box1创建一个子元素，方便测试
   var box1 = document.getElementById("box1");
   var p1 = document.createElement("p");
       p1.innerText='这是box1的P元素';
	   box1.appendChild(p1);
		 
  function do_replace(){
  	if(!box.hasChildNodes()) return ;//如果没有子节点则返回
  	//用box的第一个元素去替换box1的最后一个元素
  	box1.replaceChild(box.firstChild,box1.lastChild);
  }

</script>
</html>

效果图：

2.用新创建的节点去替换

 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <style>
        *{
        	margin:5px;
        	padding:0;
        }
        #box{
        	border:1px solid blue;
        	width:300px;
        	height:200px;
        }
        #box1{
        	position:absolute;
        	left:50%;
        	top:0;
        	border:1px solid blue;
        	width:300px;
        	height:200px;
        }
        
        </style>
        </head>
        <body>
        	<div id="box"></div>
        	
        	<button onclick='add()'>添加元素</button>
        	<button onclick='do_replace()'>用第一个元素去替换box1的最后一个元素</button>
        	<button onclick='do_newReplace()'>用新创建的元素替换box1的最后一个元素</button>
        	<div id="box1" >
        	</div>
        </body>
<script>
	var i=1;
	var box = document.getElementById("box");
	function add(){
		//创建元素box的子元素
		var p = document.createElement("p");
			p.innerText='这是box的P元素'+(i++);
			
			box.appendChild(p);
   }
   //默认给box1创建一个子元素，方便测试
   var box1 = document.getElementById("box1");
   var p1 = document.createElement("p");
       p1.innerText='这是box1的P元素';
	   box1.appendChild(p1);
		 
  function do_replace(){
  	if(!box.hasChildNodes()) return ;//如果没有子节点则返回
  	//用box的第一个元素去替换box1的最后一个元素
  	box1.replaceChild(box.firstChild,box1.lastChild);
  }
  var j=1;
  function do_newReplace(){
    var new_p = document.createElement("p");
        new_p.innerText='这是新创建的的P元素'+(j++);
  	//用新创建的元素替换box1的最后一个元素
  	box1.replaceChild(new_p,box1.lastChild);
  }

</script>
</html>

效果：

编程界小明哥

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript HTML DOM replaceChild替换子节点

目录语法：1.用已有的节点去替换2.用新创建的节点去替换replaceChild方法用新节点（新创建的节点或者已经存在的节点）替换某个子节点。语法：replaceChild(newnode,oldnode); newnode 新节点oldnode 要替换的节点1.用已有的节点去替换 <!DOCTYPE html><html> <head> <meta http-...
复制链接

扫一扫