利用JavaScript实现html中数据的增删改，注意第三和第四个按钮在同一页面中不能同时进行。
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM增删改</title>
<script type="text/javascript">
window.onload = function () {
/*创建一个城市*/
myClick("btn01",function () {
// alert(1);/*检查是否能够调到方法*/
var li = document.createElement("li");
/*实现添加的方式一：好一些*/
li.innerHTML = "成都";
/*实现添加的方式二*/
// var liText = document.createTextNode("成都");
// li.appendChild(liText);
var city = document.getElementById("city");
city.appendChild(li);/*city是父标签，在子标签里面添加*/
})
/*创建一个城市，并且我还要插队*/
myClick("btn02",function () {
// alert(2);
var li = document.createElement("li");
li.innerHTML = "宜宾";
var bj = document.getElementById("bj");
var city = document.getElementById("city");
city.insertBefore(li,bj);/*两个节点：第一个是要插入的li，第二个是插在bj的前面*/
})
/*创建一个城市，并且要去替换北京*/
myClick("btn03",function () {
var li = document.createElement("li");
li.innerHTML = "云南";
var bj = document.getElementById("bj");
var city = document.getElementById("city");
city.replaceChild(li,bj);
})
/*删除id="bj"行*/
myClick("btn04",function () {
var bj = document.getElementById("bj");
bj.remove();
})
}
function myClick(id,fun) {/*定义功能函数*/
var btn = document.getElementById(id);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id="wrap">
<div>
<p>城市列表</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<!--<li>被添加的城市</li>-->
</ul>
</div>
<div id="buttonLists">
<button id="btn01">创建一个城市“成都”</button>
<button id="btn02">创建一个城市“宜宾”，插在北京前</button>
<button id="btn03">创建一个城市“云南”，并替换北京</button>
<button id="btn04">删除北京</button>
</div>
</div>
</body>
</html>