jQuery动态操作元素
Posted cnlisiyiii-stu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery动态操作元素相关的知识，希望对你有一定的参考价值。
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>
效果：
以上是关于jQuery动态操作元素的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段
[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个指定的元素元素集合的前面,实现外部插入(代码片段