js添加和删除元素节点

╰半橙微兮° 2022-03-26 19:50 415阅读 0赞

## js添加和删除元素节点 ##

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	<script>
    		var i =0;
    		//创建节点
    		function but() {
    			//创建元素节点
    			//var ele = document.createElement("h1");//<h1></h1>
    			//创建文本节点
    			//var eleText = document.createTextNode("新建文本节点");
    			//将文本节点添加到指定的节点中
    			//	ele.appendChild(eleText);//<h1>新建文本节点</h1>
    			//获取div元素节点
    			//var divObj = document.getElementById("addElement");
    			//divObj.appendChild(ele);;
    			
    			var getVal = document.getElementById("addElement");
    			getVal.innerHTML += "<h1>创建节点"+i+"</h1>";
    			i++;
    		}
    		//删除节点
    		function but1() {
    			var delVal = document.getElementById("addElement");
    			var getH1 = document.getElementsByTagName("h1");//从最新创建的节点开始依次向上删除
    			delVal.removeChild(delVal.childNodes[getH1.length]);//一个一个的删除 
    			//delVal.remove();//删除全部
    		}
    	</script>
    </head>
    
    <body>
    	<div id="addElement">
    		
    	</div>
    	<input type="button" value="获取" onclick="but()" />
    	<input type="button" value="删除" onclick="but1()" />
    </body>
    </html>

*  实例：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70]: /images/20220326/8d356572c610463db0bfcb4157bfa295.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70 1]: /images/20220326/1d889abfd2cf4b45a11c79cbc0e0aeac.png