6.DOM对HTML元素的增删改操作

最新推荐文章于 2025-08-22 13:39:56 发布

weixin_30826095

最新推荐文章于 2025-08-22 13:39:56 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/john568300/p/6411205.html

本文提供了一个关于HTML文档中节点增删改操作的具体实例。通过JavaScript实现创建、复制及删除li节点的功能，展示了如何利用getElementById、createElement、appendChild、cloneNode、insertBefore和removeChild等方法来动态修改网页内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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="创建li节点" onclick="createNode()"/>
<input type="button" value="复制第一个li节点" onclick="copyNode()"/>
<input type="button" value="删除第一个li节点" onclick="delNode()"/>
</body>
</html>