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

太过爱你忘了你带给我的痛 2022-09-19 12:06 178阅读 0赞

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