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>
效果如下图：
