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 getVal=document.getElementById("addElement");
			//	getVal.appendChild(setVal);
			
			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>
实例：