文档处理jQuery，实现添加删除复制

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input id="t1" type="text">
 9 <input id="a1" type="button" value="添加">
10 <input id="a2" type="button" value="删除">
11 <input id="a3" type="button" value="复制">
12 <ul id="u1">
13     <li>1</li>
14     <li>2</li>
15 
16 </ul>
17 <script src="jquery-1.12.4.js"></script>
18 <script>
19     $('#a1').click(function () {
20         var v=$('#t1').val();
21         var str='<li>'+v+'</li>';
22         $('#u1').append(str)//在它的子标签的最后一个标签下面添加
23         //$('#u1').prepend(str) 在它的子标签的第一个标签上面添加
24         // $('#u1').after(str)添加在这个标签的下面和它同级
25         // $('#u1').before(str)添加在这个标签的上面和他同级
26 
27     });
28 
29     $('#a2').click(function () {
30        var v = $('#t1').val();
31        $('#u1').children().eq(v).remove()
32         //remove()删除
33         //empty()清空内容标签还在
34     });
35     $('#a3').click(function () {
36         var index = $('#t1').val();
37         // clone()克隆
38         var v = $('#u1').children().eq(index).clone();
39         $('#u1').append(v);
40     });
41 </script>
42 
43 </body>
44 </html>
效果如下图：