js添加和删除元素节点

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>
  • 实例:
    在这里插入图片描述
    在这里插入图片描述
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值