jQuery将li元素插入列表开头
分类:实例代码
jQuery将li元素插入列表开头属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它使用jQuery实现了将新的li元素插入到li元素列表的开头。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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地址是pipipi.net</li>") newLi.insertBefore($("li").eq(0)); }) }); </script> </head> <body> <ul id="box"> <li>前端教程网欢迎您</li> <li>只有努力奋斗才会有美好的未来</li> <li>没有人一开始就是高手</li> <li>只有当下的时间才是最珍贵的,不要期待明天。</li> </ul> <input type="button" id="bt" value="查看效果"/> </body> </html>
上面的代码实现了我们的预期效果,代码非常简单。
相关阅读:
(1).insertBefore方法参阅jQuery insertBefore()一章节。
(2).eq方法参阅jQuery eq()一章节。
jQuery将li元素插入列表开头,这样的场景在实际项目中还是用的比较多的,关于jQuery将li元素插入列表开头就介绍到这了。