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>
- 实例:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5897d9dea1d0fc967c9a4cfb8b1c4e62.jpeg)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/416f419b5f2a154ca0ac7a57e4784f93.jpeg)