JS中DOM对象的使用——续
案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象</title>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
<li id="tj">天津</li>
</ul>
<script type="text/javascript">
//1.创建节点
var li1 = document.createElement("li");
li1.innerHTML = "重庆";
var li2 = document.createElement("li");
li2.innerHTML = "香港";
//2.添加节点
//2.1追加到最后
var ul = document.getElementById("city");
ul.appendChild(li1);
//2.2插入到弟弟之前
var gz = document.getElementById("gz");
ul.insertBefore(li2,gz);
//3.删除节点
//3.1父亲删除孩子
var sz = document.getElementById("sz");
ul.removeChild(sz);
//3.2自己删除自己
var tj = document.getElementById("tj");
tj.remove();
</script>
</body>
</html>最终页面显示效果：
