HTML 对标签进行新加,复制,修改,删除功能

来源：互联网发布：音频制作软件下载编辑：程序博客网时间：2024/05/28 16:04

<!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>

阅读全文

0 0