<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>标签对象的class相关的方法</title>
<style>
#div1{
height:200px;
background-color: #1ecc86;
overflow: hidden;//防止溢出
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
<p>p</p>
</div>
<input type="submit" onclick="add()" value="add p tag">
<input type="submit" onclick="remove()" value="remove p tag">
<script>
//1.增
// createElement() 创建一个元素
// appendChild() 添加元素
// 2.删
// p.removeChild()
// 改查
function add() {
var ele=document.getElementById('div1');
var son=document.createElement('p');
son.innerHTML='<em>hello ppp</em>';
// son.innerText='<em>hello ppp</em>';//innerText不能解析标签，只是在添加内容时使用
ele.appendChild(son);
}
function remove() {
var ele=document.getElementById('div1');
var last_son=ele.lastElementChild;
ele.removeChild(last_son);
}
</script>
</body>
</html>