您的位置：首页 > Web前端 > HTML

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

2017-10-12 08:49 155 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航