js中元素的新增和移除

html按钮绑定事件

<button onclick="addElenemt('test1')">添加元素</button>
<button onclick="removeAll()">删除全部</button>

js先判断有没有id为testdiv的元素，没有就创建并新增，有就不创建div元素了，移除直接移除div,代码复制即用

function addElenemt(Nodei) {
	var vtest = document.getElementById("testdiv"); //找到id为testdiv的元素
	var vtext= document.createTextNode(Nodei); //将Nodei放入创建的文本节点中
    var vpre = document.createElement("pre");//pre标签用来表示计算机源代码
	vpre.appendChild(vtext); //将text添加到pre中
	if(!vtest) {
		vtest = document.createElement("div"); //创建一个div元素
		vtest.id = "testdiv"; //给元素的id赋值
    	vtest.innerHTML = "<h1>元素列表</h1>"; //给div元素初始化Html
    	document.body.appendChild(vtest); //将元素log添加到文档末尾
    	}
    vtest.appendChild(vpre); //将per添加到log中
}

function removeAll(){
	var vtest = document.getElementById("testdiv"); //找到id为testdiv的元素
	vtest.parentNode.removeChild(vtest);
}