JavaScript HTML DOM replaceChild替换子节点

川长思鸟来 2021-07-24 18:56 428阅读 0赞

**目录**

说明

语法：

1.用已有的节点去替换

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

--------------------

# 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>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 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>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/07b10cfa268c4f13b0de4d511987d4c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/c75c357c68a04b769fa23d0c83d34f12.png

发表评论取消回复

表情：

评论列表（有 0 条评论，428人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM节点操作

一，节点内容 innerHTML设置节点内容 <body> <div id="div"> 节点内容 ...

绝地灬酷狼/ 2024年04月19日 09:35/ 0 赞/ 33 阅读

相关 HTML DOM节点概述

一，概述 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 DOM 标准被分为 3 个不同的部分： 1. 核心 DOM ...

「爱情、让人受尽委屈。」/ 2024年04月19日 09:29/ 0 赞/ 32 阅读

相关 JavaScript HTML DOM 元素（节点）

JavaScript HTML DOM 元素（节点） -------------------- 添加和删除节点（HTML 元素）。创建新的 HTML 元素如

梦里梦外;/ 2022年09月29日 14:51/ 0 赞/ 299 阅读

相关 javascript 替换元素节点replaceChild()

替换元素节点replaceChild() replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。语法： node.replaceChild (

谁借莪１个温暖的怀抱￠/ 2022年09月22日 15:53/ 0 赞/ 152 阅读

相关 JavaScript DOM 删除子节点

这些天一直在学习JavaScript，但由于工作繁忙，导致学习的兴致不高，一个对象都看了好几天视频，所以想以写博客的方式督促自己，希望能做到不管什么知识，每日一更。一个元

快来打我*/ 2022年05月21日 06:20/ 0 赞/ 505 阅读

相关 DOM替换节点

一介绍替换节点可以使用replaceChild()方法来实现。 replaceChild()方法用来将旧的节点替换成新的节点。 obj. replaceChild(n

拼搏现实的明天。/ 2022年05月12日 00:14/ 0 赞/ 215 阅读

相关 JavaScript HTML DOM

本博客转载: [点击这里][Link 1] HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Mode

傷城~/ 2021年12月01日 14:20/ 0 赞/ 252 阅读

相关 JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)

操作节点 Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表： Node类型原型方法说明： <table>

矫情吗；*/ 2021年08月13日 17:13/ 0 赞/ 424 阅读

相关 JavaScript HTML DOM replaceChild替换子节点

目录说明语法： 1.用已有的节点去替换 2.用新创建的节点去替换 -------------------- replaceC

川长思鸟来/ 2021年07月24日 18:56/ 0 赞/ 429 阅读

相关 JavaScript HTML DOM removeChild删除子元素

removeChild 方法指定元素的某个指定的子节点，并返回被删除的节点，如果节点不存在则返回 null。 <!DOCTYPE html> <htm

╰半橙微兮°/ 2021年07月24日 13:50/ 0 赞/ 547 阅读