jQuery將li元素插入列表中任意位置
本章節分享一段程式碼例項,它實現將新建立的li元素動態插入到列表中的任意位置。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.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地址是softwhy.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元素插入到指定位置的功能。
相關閱讀:
(1).insertBefore方法參閱jQuery insertBefore()一章節。
(2).eq方法參閱jQuery eq()一章節。
相關文章
- jQuery將li元素插入列表開頭jQuery
- js實現的在li元素列表的任意位置插入一個新的li元素JS
- 如何利用jquery在任意指定li元素後面插入新的li元素jQuery
- li列表的前面插入一個元素
- jquery如何在li元素列表的開頭新增一個新li元素jQuery
- JavaScript 插入新li元素JavaScript
- 獲取棧中任意位置的元素
- ul最後插入li元素
- jQuery怎麼獲取li列表中的第幾個lijQuery
- 在指定位置插入一個新的li元素程式碼例項
- JQuery插入元素jQuery
- jQuery複製指定li元素jQuery
- jQuery刪除指定li元素jQuery
- jquery獲取指定li元素後面的第n個li元素jQuery
- javascript獲取當前li元素在集合中的位置JavaScript
- jQuery調整li元素順序jQuery
- jQuery 刪除當前li元素jQuery
- jQuery獲取li元素後面所有兄弟元素jQuery
- jQuery元素在陣列中的索引位置jQuery陣列索引
- jQuery查詢第n個li元素jQuery
- jQuery 移除ul下指定的li元素jQuery
- JavaScript獲取當前li元素的索引位置JavaScript索引
- 修改集合列表指定位置元素
- 如何將<img>圖片插入html元素中HTML
- jQuery刪除具有指定文字的li元素jQuery
- JavaScript 陣列 指定索引位置插入元素JavaScript陣列索引
- jQuery獲取當前li元素的下一個元素jQuery
- javascript獲取li列表中的第幾個liJavaScript
- 利用jQuery如何遍歷指定的li元素集合jQuery
- jQuery點選的是第幾個li元素jQuery
- jquery動態新增li元素程式碼例項jQuery
- JavaScript陣列指定位置插入新元素JavaScript陣列
- 在JS陣列指定位置插入元素JS陣列
- CSS 文字li元素中垂直居中CSS
- jQuery獲取指定的li元素程式碼例項jQuery
- jQuery調整li元素順序程式碼例項jQuery
- jquery如何獲取大於指定索引的li元素jQuery索引
- jQuery獲取所有的li元素程式碼例項jQuery