标签：调用 end mic UNC 对象 parent pen html 技术
语法：$(‘<li></li>‘);
返回一个新创建的jQuery对象
语法1：新创建jQuery对象.appendTo(‘父元素选择器‘ 或 父元素jQuery对象);
1 <body> 2 <button>点击追加li</button> 3 <ul class="ul1"></ul> 4 <script src="lib/jquery-1.12.4.js"></script> 5 <script> 6 $(‘button‘).click(function() { 7 //创建jQuery对象li。li中的内容可以.text() 8 // var newLi = $(‘<li>我是新li</li>‘); 9 var newLi = $(‘<li></li>‘).text(Math.random()); 10 //追加到ul中。appendTo()中的内容可以放任何能表示ul的方法。 11 // newLi.appendTo( ‘ul‘ ); 12 // newLi.appendTo( $(‘.ul1‘) ); 13 newLi.appendTo( $(‘.ul1‘)[0] ); 14 }); 15 </script> 16 </body>
语法2：父元素jQuery对象.apeend(新创建的jQuery对象);
1 <body> 2 <button>点击追加li</button> 3 <ul class="ul1"></ul> 4 <script src="lib/jquery-1.12.4.js"></script> 5 <script> 6 $(‘button‘).click(function() { 7 var newLi = $(‘<li></li>‘).text(Math.random()); 8 //追加到ul中。 9 // $(‘.ul1‘).append(newLi); 10 $(‘.ul1‘).append(‘<li>我是新li</li>‘); 11 }); 12 </script> 13 </body>
语法1：新创建jQuery对象.prependTo(‘父元素选择器‘);
语法2：父元素jQuery对象.prepend(新创建的jQuery对象);
1 <body> 2 <button>点击追加li</button> 3 <ul class="ul1"></ul> 4 <script src="lib/jquery-1.12.4.js"></script> 5 <script> 6 $(‘button‘).click(function() { 7 var newLi = $(‘<li></li>‘).text(Math.random()); 8 //追加到ul中 9 // newLi.prependTo(‘.ul1‘); 10 $(‘.ul1‘).prepend(newLi); 11 }); 12 </script> 13 </body>
语法：jQuery对象.remove();
删除谁就用谁调用。
语法1：jQuery对象.empty(); 推荐使用。
语法2：**jQuery对象.html(‘‘); **
语法2虽然清空了标签内容，但内存中相关事件还在，占内存。
操作英雄列表案例：
1 <body> 2 <button class="btn1">创建英雄列表</button> 3 <button class="btn2">清空</button> 4 <ul> 5 <!-- <li> 6 <span title="坦克">亚瑟</span> 7 <a href="javascript:">删除</a> 8 </li> --> 9 </ul> 10 <script src="lib/jquery-1.12.4.js"></script> 11 <script> 12 //后端数据 13 var heros = [ 14 { name: ‘亚瑟‘, type: ‘坦克‘ }, 15 { name: ‘后裔‘, type: ‘射手‘ }, 16 { name: ‘百里守约‘, type: ‘射手‘ }, 17 { name: ‘貂蝉‘, type: ‘法师‘ }, 18 { name: ‘鲁班‘, type: ‘射手‘ }, 19 { name: ‘李白‘, type: ‘刺客‘ }, 20 ]; 21 //添加 22 $(‘.btn1‘).click(function () { 23 for (var i = 0; i < heros.length; i++) { 24 var obj = heros[i]; 25 var newLi = $(‘<li></li>‘); 26 //定义内容 27 var htmlStr = ` 28 <span title="${obj.type}">${obj.name}</span> 29 <a href="javascript:">删除</a> 30 `; 31 newLi.html(htmlStr); //设置li的内容 32 newLi.appendTo(‘ul‘); //追加 33 34 //定义内容也可以用另一种语法： 35 // var htmlStr = ` 36 // <li> 37 // <span title="${obj.type}">${obj.name}</span> 38 // <a href="javascript:">删除</a> 39 // </li> 40 // `; 41 // $(‘ul‘).append(htmlStr); //追加 42 } 43 //删除 44 $(‘a‘).click(function () { 45 $(this).parent().remove(); 46 }); 47 }); 48 //清空 49 $(‘.btn2‘).click(function() { 50 // $(‘ul‘).html(‘‘); //把ul内容设置为空。 51 $(‘ul‘).empty(); 52 }); 53 </script> 54 </body>
效果：
标签：调用 end mic UNC 对象 parent pen html 技术
原文地址：https://www.cnblogs.com/cnlisiyiii-stu/p/11597816.html
