首页 > 代码库 > 6.DOM对HTML元素的增删改操作
6.DOM对HTML元素的增删改操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>节点的增删改操作</title>
<script type="text/javascript">
function createNode(){
//创建一个li元素
var li = document.createElement("li");
li.innerHTML = "郑州";//添加内容
var ul = document.getElementById("city");
ul.appendChild(li);
}
function copyNode(){
//复制第一个li
var ul = document.getElementById("city");
var li1 = ul.firstChild.nextSibling;
var newli = li1.cloneNode(true);
ul.insertBefore(newli,li1);
}
function delNode(){
//删除最后一个li
var ul = document.getElementById("city");
var lastli = ul.getElementsByTagName("li");
if(lastli.length>0){
ul.removeChild(lastli[lastli.length-1]);
}
}
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
</ul>
<input type="button" value="http://www.mamicode.com/创建li节点" onclick="createNode()"/>
<input type="button" value="http://www.mamicode.com/复制第一个li节点" onclick="copyNode()"/>
<input type="button" value="http://www.mamicode.com/删除第一个li节点" onclick="delNode()"/>
</body>
</html>
6.DOM对HTML元素的增删改操作