1. 动态创建元素
语法：$(‘<li></li>‘);
返回一个新创建的jQuery对象
2. 动态追加元素
1）向父元素最后追加
语法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>
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>
效果：
原文地址：https://www.cnblogs.com/cnlisiyiii-stu/p/11597816.html
时间： 2024-10-08 09:37:45