(8)JavaScript DOM节点的替换

最新推荐文章于 2024-06-09 00:30:00 发布
最新推荐文章于 2024-06-09 00:30:00 发布
阅读量926 收藏 2
点赞数
分类专栏： JavaScript DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuz_99/article/details/84503987
版权

节点的替换：

  1. replaceChild（）： 把一个给定父元素里的一个子节点替换成另外一个子节点 var reference = element.replaceChild（newChild，oldChild）；
  2. 该节点除了替换功能以外还有移动的功能
  3. 该方法只能完成单向替换，若需要使用双向替换，需要自定义函数

节点的替换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  
	  
	 //测试replaceChild方法
	  window.onload = function()
	  {
   
	  	 alert(1);
			var bjNode = document.getElementById("bj");
			var rlNode = document.getElementById("rl");
			replaceEach(bjNode,rlNode);		
	  }
	  //自定义函数  互换节点的函数
	  function replaceEach (aNode,bNode) {
   
	 	//首先克隆一个aNode节点
	 	var tempA = aNode.cloneNode(true);
	 	//获取父亲节点
	 	var apar = aNode.parentNode;
	 	var bpar = bNode.parentNode;
	 	
	 	//替换
	 	bpar.replaceChild(tempA,bNode);
	 	apar.replaceChild(bNode,aNode);
	 }
	  }
	</script>
</head>
最低0.47元/天 解锁文章
有个机车梦
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用JavaScript替换DOM元素？
qq_54978068的博客
01-11 4493
如何使用JavaScript将一个DOM元素替换为另一个元素？下面本篇文章就来给大家介绍一些使用JavaScript替换DOM元素的方法，希望对大家有所帮助。 在JavaScript中可以使用以下几种方法来将一个DOM元素替换为另一个元素： 方法1：使用parentNode属性和replace()方法 parentNode属性以Node 对象的形式返回指定节点的父节点；如果指定节点没有父节点，则返回 null。 语法： node.parentNode 返回值：返回一个Node对象，表示节点的父节点，如果没有
JS之DOM元素的增、插、删、替换
qq_46179838的博客
11-04 1639
DOM元素的增、插、删、替换一、增1、document.creatElement()——创建元素节点（即创建标签）2、document.creatTextNode()——创建文本节点3、document.creatComment()——创建注释节点4、document.creatDocumentFragment()——创建文档碎片节点5、四个方法的使用需要注意下面几点：二、插1、appendChild()——类似于剪切的操作2、父级.insertBefore(a,b)三、删1、parent.removeCh
js增加、删除、替换DOM对象
weixin_34290096的博客
01-14 2669
当网页被加载时，浏览器会创建页面的文档对象模型DOM，即Document Object Model 整个文档为一个文档节点(document对象) 每个html元素为一个元素节点(element对象) html元素内的文本为文本节点(textNode对象) html元素的属性为属性节点(attribute对象) html注释为注释节点(comment对象) 节点自身属性： no...
Javascript 替换节点详解
最新发布
大剑师兰特的GIS世界
06-09 876
在JavaScript中，替换节点是指将DOM树中的某个节点用另一个新节点替换的操作。这一功能对于动态修改页面内容、实现复杂的UI交互非常有用。以下是关于替换节点的详细说明、示例代码、注意事项以及应用场景。
JavaScript——HTML DOM - 元素的加入、删除、替换
guitarist0505的博客
04-09 2830
——————————————————————————————————————————一、创建新元素 1.- appendChild()  先创建该元素，然后把它追加到已有的元素上。&lt;div id="div1"&gt; &lt;p id="p1"&gt;This is a paragraph.&lt;/p&gt; &lt;p id="p2"&gt;This is another p
JavaScript的DOM编程--09--节点的替换
weixin_30894389的博客
09-25 76
节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,oldChild); 返回值是一个指向已被替换的那个子节点的引用指针 2). 该节点除了替换功能以外还有移动的功能. 3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:...
JavaScript HTML DOM元素 节点操作汇总
10-16
总之，JavaScript的DOM节点操作提供了强大的能力，使我们能够动态地更新页面内容，实现丰富的用户交互。通过熟练掌握这些基本操作，开发者可以轻松地创建动态、响应式的Web应用。在实际开发中，结合事件监听、CSS...
DOM节点的替换或修改函数replaceChild()用法实例
09-03
DOM节点的替换和修改是JavaScript中动态操作网页内容的基础。`replaceChild()`函数提供了便利的方法，让我们能够轻松地更新文档结构，实现丰富的交互效果。通过实例学习，我们可以更好地理解和掌握这一功能，从而在...
JavaScript 节点操作 以及DOMDocument属性和方法
10-30
JavaScript中的节点操作和DOMDocument对象是Web开发中的基础概念，它们是处理和操作HTML或XML文档的核心工具。DOM（文档对象模型）是一种标准，它允许程序和脚本动态更新、添加、删除和改变任何HTML或XML文档的结构...
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
基本DOM节点操作
08-31
本文将深入探讨基本的DOM节点操作，帮助开发者更好地理解和应用这些操作。 1. **获取元素节点** - `getElementById()`：这是最直接的方法，通过元素的唯一ID来获取指定元素。例如，`document.getElementById('...
jQuery 实现DOM元素拖拽交换位置的实例代码
10-15
主要介绍了jQuery 实现DOM元素拖拽交换位置，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
JS DOM基本操作之创建、插入、删除、替换节点操作
qq_45560350的博客
08-23 4588
创建dom节点（并未添加到页面中，一般配合插入方法使用） document.createElement(); 创建一个元素节点 var div = document.createElement('div'); 可以看到虽然创建了div节点，但页面中并没有显示 因为这里只是创建div节点，并没有把它添加到页面中 document.createTextNode(); 创建一个文本节点 var text = document.createTextNode('殷志源'); 没有添加到页面中 do
js dom 节点双向替换
qq_45827064的博客
04-30 310
元素节点CRUD 属性节点CRUD 文本节点CRUD 属性节点双向替换 元素节点双向替换
JavaScript 操作 DOM 节点树（添加、插入、删除、替换、复制节点）(1)
2401_84092483的博客
05-12 221
把文本添加到li下面获取到ul把li添加到ul下面。
JavaScript 操作 DOM 节点树（添加、插入、删除、替换、复制节点）
ONESTARの博客
08-20 5056
目录 1、添加节点 2、插入节点 3、删除节点 4、替换节点 5、复制节点 1、添加节点 appendChild()：添加子节点到末尾（类似于粘贴复制的效果） 步骤： 获取到ul 获取到div2 把ul添加到div2 2、插入节点 insertBefore(newNode，oldNode)：在某个节点之前插入一个新的节点 步骤： 获取到li3标签 创建li 创建文...
js-dom操作-添加-删除-替换
weixin_46457853的博客
03-16 209
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button onclick="createNewP()">动态添加</button> <button onclick="createNewP2()">动态添加2</butt
原生JS怎样增、删、查、替换Dom节点
weixin_45259626的博客
04-23 486
（1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入、克隆 appendChild() removeChild() replaceChild() insertBefore() cloneNode() （3）...
web前端学习（四十二）——JavaScript DOM元素（添加、移除及替换）、DOM集合（Collection）、DOM节点列表（NodeList）
★★光亭★★
02-23 9164
web前端学习（四十二）——JavaScript DOM元素（添加、移除及替换）、DOM集合（Collection）、DOM节点列表（NodeList）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值