一、实现效果
二、HTML、CSS、JS代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" >
window.onload = function () {
var box = document.getElementById("box"); //通过id属性值获得DIV
}
function addNode(){
var p = document.createElement("p"); //创建需要添加的元素节点
p.innerHTML = "这里是文字这里是文字3";
box.appendChild(p); //将段落节点添加到box的子节点列表后面
}
function deleteNode(){//删除节点
var p = box.lastChild;
box.removeChild(p);//删除第一个段落
}
</script>
<style>
#bigBox{
width: 400px;
margin: 100px auto;
padding: 30px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="bigBox">
<div id="box">
<p>这里是文字这里是文字1</p>
<p>这里是文字这里是文字2</p>
</div>
<a href="javascript:addNode()">添加</a>
<a href="javascript:deleteNode()">删除</a>
</div>
</body>
</html>