1. 动态创建元素

语法：$('<li></li>');

返回一个新创建的jQuery对象

 

2. 动态追加元素

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>

 

父元素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>

 

2）向父元素最前面追加

语法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>

 

3. 动态删除元素

语法：jQuery对象.remove();

删除谁就用谁调用。

4. 清空元素

语法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>

效果：

jquery动态生成表格 jquery动态创建li元素_jQuery