DOM对象增删元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
height: 200px;
background-color: #84a42b;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">hello div2</div>
<p>hello p</p>
</div>
<input type="button" value="添加p" onclick="add();">
<input type="button" value="删除p" onclick="remove();">
<script>
function remove() {
var ele=document.getElementById("div1");
var last_son=ele.lastElementChild;
ele.removeChild(last_son);
}
function add() {
var ele=document.getElementById("div1");
var son=document.createElement("p");
son.innerHTML="hello ppp"
ele.appendChild(son);
}
</script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/dbslinux/p/11396486.html