HTML 对标签进行新加,复制,修改,删除功能_html写一个标签组件,标签可以新增,删除,编辑-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40143811/article/details/78210465

本文介绍了一种利用jQuery简化DOM操作的方法，包括新建、复制、修改及删除列表项等常见任务。通过具体的HTML页面和jQuery脚本实例展示了如何实现这些功能。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="jquery-2.1.0.js"></script>
<body>
<input type="text" placeholder="请输入新建的内容"/>

<br />
<button>新建</button>
<button>复制</button><br />
<input type="text" placeholder="请输入想要修改的内容" id="xg"/><button>修改</button><br />
<input type="text" placeholder="根据下标删除元素" id="del"/><button>删除</button><br />
<ul>
   <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>
<script>
   $(function(){
       //新建
       $("button:eq(0)").click(function(){
           var a = $("input").val();
           $("<li>"+a+"</li>").appendTo("ul");
           });
       //复制
       $("button:eq(1)").click(function(){
           $("ul").clone().appendTo("body");
           });
       //修改
       $("button:eq(2)").click(function(){
           var xg = $("#xg").val();
           $("li:eq(0)").replaceWith("<li>"+xg+"</li>");
           });


       //删除
       $("button:eq(3)").click(function(){
           var a =$("#del").val();
           //confirm("确定删除下标为:"+a+"的元素?");
           $("li:eq("+a+")").remove();
           });

       });
</script>

</body>
</html>