jQuery实现将li元素插入列表中任意位置代码示例
分享一段代码实例,它实现将新创建的li元素动态插入到列表中的任意位置。
代码实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>搞代码</title> <style type="text/css"> #box li{ width:300px; height:30px; list-style-type:none; font-size:12px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ $("#bt").click(function(){ var newLi=$("<li>本站的url地址是gaodaima.com</li>") newLi.insertBefore($("li").eq(2)); }) }); </script> </head> <body> <ul id="box"> <li>搞代码欢迎您</li> <li>只有努力奋斗才会有美好的未来</li> <li>没有人一开始就是高手</li> <li>只有当下的时间才是最珍贵的,不要期待明天。</li> </ul> <input type="button" id="bt" value="查看效果"/> </body> </html> |
上面的代码实现了将新创建的li元素插入到指定位置的功能。
本文案例为大家展示了《jQuery实现将li元素插入列表中任意位置代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。
原创文章,转载请注明: 转载自搞代码
本文链接地址: jQuery实现将li元素插入列表中任意位置代码示例

微信 赏一包辣条吧~

支付宝 赏一听可乐吧~
发表评论