div节点的操作（添加，删除，替换，克隆）

最新推荐文章于 2023-06-10 18:39:47 发布
最新推荐文章于 2023-06-10 18:39:47 发布
阅读量5.5k 收藏 4
点赞数
分类专栏： javascript 文章标签： javascript 
<html>
	<head>
		<title></title>
		<style type="text/css">
			div{
				border: 1px solid #ff0000;
				height:100px;
				width:200px;
				margin:10px 10px;
				padding:10px 10px;
				}
				
			#div_1{
				background-color:#ff0000;
			}
			#div_2{
				background-color:#ffff00;
			}
			#div_3{
				background-color:#00ff00;
			}
			#div_4{
				background-color:#ff00ff;
			}
		</style>
		
		<script>
			/*
				添加内容到div中
			*/
			
			function adddemo(){
			//获取第一个div节点对象
			var divNode1 = document.getElementById("div_1");
			//alert(divNode1.nodeName);
			//创建一个文本节点
			var textNode = document.createTextNode("div区域");
			//alert(textNode.nodeName);
			//将文本节点添加到div中
			divNode1.appendChild(textNode);
			
			//添加一个超链接
			//创建一个超链接对象
			var aNode = document.createElement("a");
			//链接地址
			aNode.href = "http://www.baidu.com";
			//链接内容
			aNode.innerText = "百度";
			
			//把节点对象添加到div中
			divNode1.appendChild(aNode);
			}

			/*
			删除div节点中内容
			*/
			function deleteNode(){
				//获取当前节点对象
				var divNode2 = document.getElementById("div_2");
				//获取文本节点
				var textNode = divNode2.childNodes[0];
				//删除文本节点
				divNode2.removeChild(textNode);
			}
			
			/*
			删除节点
			*/
			function deleteNode2() {
			
				/*
				//第一种
				//获取div节点对象
				var divNode2 = document.getElementById("div_2");
				//获取父节点
				var parentNode = divNode2.parentNode;
				//alert(parentNode.nodeName);
				parentNode.removeChild(divNode2);
				*/
				
				//第二种
				//节点自己删除自己
				//获取节点对象
				var divNode2 = document.getElementById("div_2");
				//删除节点,参数为true时，连同子节点也一起上删除，此方法在IE中有效
				divNode2.removeNode(true);
					
			}
			
			/*
			替换节点，用来替换的div对象不存在了，用div1替换你div3
			*/
			function update(){
				//获取第一个div节点对象
				var divNode1 = document.getElementById("div_1");
				//获取另一个div节点对象
				var divNode3 = document.getElementById("div_3");
				//替换节点,IE有效
				divNode3.replaceNode(divNode1);
			}
			
			/*
				克隆节点，原节点存在，用div3来替换div4
			*/
			function clone(){
				//获取div3的节点对象
				var div3Node = document.getElementById("div_3");
				//获取div4节点对象
				var div4Node = document.getElementById("div_4");
				
				//复制div3,参数true复制时连同子节点也一起复制
				var div3Node2 = div3Node.cloneNode(true);
				
				//替换
				div4Node.replaceNode(div3Node2);
				
			}
			
			
			
		</script>
		
	</head>
	
	<body>
		<div id = "div_1">
		
		</div>
		
		<div id = "div_2">
			div区域2
		</div>
		
		<div id = "div_3">
			div区域3
		</div>
		
		<div id = "div_4">
			div区域4
		</div>
		
		<hr/>
		
		<input type="button" value="添加内容" οnclick="adddemo()" />
		<input type="button" value="删除节点内容" οnclick="deleteNode()" />
		<input type="button" value="删除节点" οnclick="deleteNode2()" />
		<input type="button" value="替换节点" οnclick="update()" />
		<input type="button" value="克隆节点" οnclick="clone()" />
										
		
	</body>
	
</html>

ma451152002
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
兼容和节点
weixin_44740410的博客
03-28 182
节点的操作 文档对象:document 元素:element 页面中所有的标签,元素--标签--对象 节点:页面中索引的内容(标签 属性 文本) 节点的属性: NodeType:节点的类型 1--表示标签 2--表示属性 3--文本 NodeName:节点的名字1--大写的标签名字 属性--小写的属性名字 文本节点--#text NodeValue:节点的值 标签--null ...
创建和删除子元素节点
weixin_44164982的博客
08-06 298
1、demo效果 2、demo功能 在input中输入内容，获取到输入内容，将获取到的输入内容作为li元素节点内容，将li元素作为子节点插入到div中。 将添加到div中的子节点逐次删除 将添加的子节点一次性删除 3、demo总结 (1)将添加到div中的子节点逐次删除时，需要先判断子节点是否已经删除完，如果div中已经不存在子节点，继续删除就会报错。 这里用if语句结合div[0].hasChildNodes()方法进行判断。这里可以正序删除，也可以逆序删除。分别是div[0].fir..
JS多种添加div节点的方法
最新发布
u010879286的博客
06-10 2208
我是同级元素insertBefore</p>").insertBefore($("#wrap"));$("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));$("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));$("#wrap").append("<p class='three'>我是子元素append
js实现删除div下所有子节点
热门推荐
MoonX的专栏
10-07 6万+
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <br />  <br /><html xmlns="http://www.w3.org/1999/xhtml">  <br /><head><br />    <meta http-equiv="Content-Type" content="text/
向div中动态添加删除节点
杨明的博客
09-06 829
function appendA(){ var fileType_ = $("[name='file']").val(); var childrenlength = $('#hiddenfile').children().length; $("#hiddenfile").append(""+fileType_+""+ ""+ "删除"+ ""); $("#fi
JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf
11-13
` 将 `<span>` 节点替换成 `<p>` 节点。 8. 设置节点属性 使用 `setAttribute()` 方法可以设置节点的属性。例如，`node.setAttribute("title", "abc");` 将设置 `<div>` 节点的 `title` 属性为 "abc"。 ...
jQuery中对节点进行操作的相关介绍
10-27
4. **节点替换**： - `replaceWith()`：使用指定内容替换匹配的元素。 - `replaceAll()`：用指定内容替换选择的目标元素。 如： ```javascript $("br").replaceWith("<hr/>"); ``` 5. **包裹节点**： - `...
JS简单添加元素新节点的方法示例
10-18
本示例主要讲解了如何使用JavaScript来创建、添加和克隆页面元素节点，这些都是前端开发中常见的操作。下面将详细解析这些方法： 首先，我们获取页面上的某个特定元素。在这个例子中，我们通过`getElementById`方法...
使用js完成节点的增删改复制等的操作
12-11
} </script> </head> <body> 节点操作示例</h1> ()">向div_1添加文本</button> ()">向div_1添加按钮</button> ('div_2')">删除div_2所有子节点</button> ('div_3')">删除div_3</button> ()">修改div_3的背景颜色...
JQ 替换节点
08-13
"JQ 替换节点"这个话题涉及到jQuery中的`.replaceWith()`方法，它允许我们将一个DOM元素或一组元素替换为其他内容。在这个主题中，我们将深入探讨`.replaceWith()`的用法、工作原理以及相关的实用技巧。 首先，`....
动态创建元素节点
灰白色
05-15 448
开发工具与关键技术：visual Studio jquery 作者：邓伟征 撰写时间：2019年5月15日 创建流程很简单：1创建节点（属性 元素 文本）document createElement 2：添加节点属性 setAttribute 3：加入到文档中 appendCgld var body = document.querySelector(‘body’);//查找body元素 ////...
节点操作（创建、插入、删除、替换、克隆）
2301_76440312的博客
03-04 133
节点操作（创建、插入、删除、替换、克隆）
CEF3 笔记三(常用类的介绍)
weixin_34415923的博客
06-10 260
接上文《CEF3 笔记二(常用的类介绍)》 CefBrowserHost 类介绍 CefBrowserHost: 该类在浏览器窗口来看代表了 browser 进程，同时也暴露了与浏览器窗口相关的接口，该类的方法只能在 browser 进程中调用，但可以在 browser 进程的任意线程中被调用。该类的主要方法如下： 创建浏览器对象。 需要传入的参数包括 CefWindowInfo ...
js 给div添加键盘键入【Delete】，进行元素删除问题
起风了
03-20 1491
var resizableid = "";//用于键盘键入【del】 document.onkeyup = keyUp;//注册事件 //键盘键入【del】删除 function keyUp(e) { var keycode = 0; if (navigator.appName == "Microsoft Internet E...
有关Html页面节点的简单理解
weixin_30520015的博客
08-22 168
这是之前研究web前端的一点经验，主要针对刚入门还没怎么研究的朋友。 因为我发现我在用js，css参与过网站开发项目后仍然没有理解文本节点与普通节点的差别，所以记下来拿来分享一下。 先上结论：<div>之内有三个节点，包括两个文本节点和一个<b>节点，就算文本节点里面没有任何文字，它也是依旧存在的~ 下面是一个简单的Html界面。 <htm...
JavaScript（三十五）——div子节点操作，飞机大战游戏，小球碰撞边界、焦点事件
苦作舟的空城机
07-25 884
目录 div中子节点操作 HTML DOMcreateElement()方法 小球碰撞边界实验 input焦点事件 飞机大战游戏 div中子节点操作 HTML DOMcreateElement()方法 createElement() 方法通过指定名称创建一个元素，所有主要浏览器都支持 createElement() 方法 例子：向div末尾添加节点 <bo...
c# 替换html注释,C# 替换div标签
weixin_39657249的博客
06-22 152
C#替换div标签0fillm2013.11.06浏览24次分享举报estyle="BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 300px; HEIGHT: 200px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"id=divMedia...
JavaScript基础(27)—DIV节点的操作
04-22 85
javascript039.html --> div { border:#0099ff 1px solid; height:60px; width:120px; margin:20px 0px 20px 20px; padding:10px 0px 0px 20px; } #div_1 {
vue中动态添加div节点
03-10
可以使用Vue的v-for指令和数组来动态添加div节点，例如： 在Vue实例中定义一个数组dataList，然后使用v-for指令遍历这个数组，将每个元素渲染成一个div节点，最后通过Vue的方法向dataList数组中添加元素即可动态添加div节点。具体代码如下： <template> <div> <div v-for="(item, index) in dataList" :key="index">{{ item }}</div> </div> </template> <script> export default { data() { return { dataList: ['div1', 'div2', 'div3'] } }, methods: { addDiv() { this.dataList.push('div' + (this.dataList.length + 1)) } } } </script> 在上面的代码中，我们定义了一个dataList数组，其中包含了三个元素，分别是'div1'、'div2'、'div3'。然后使用v-for指令遍历这个数组，将每个元素渲染成一个div节点。最后我们定义了一个addDiv方法，当调用这个方法时，会向dataList数组中添加一个新的元素，这样就可以动态添加div节点了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值