js實現的在li元素列表的任意位置插入一個新的li元素
本章節分享一段程式碼例項,它實現了在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> window.onload=function(){ var obox=document.getElementById("box"); var obt=document.getElementById("bt"); obt.onclick=function(){ var newLi=document.createElement("li"); newLi.innerHTML="本站的url地址是softwhy.com"; var tempOne=obox.getElementsByTagName("li")[2]; obox.insertBefore(newLi,tempOne) } } </script> </head> <body> <ul id="box"> <li>螞蟻部落歡迎您</li> <li>只有努力奮鬥才會有美好的未來</li> <li>沒有人一開始就是高手</li> <li>只有當下的時間才是最珍貴的,不要期待明天。</li> </ul> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的實現了在原來li元素列表的第二個和第三個之間插入一個新的li元素。
相關閱讀:
(1).document.createElement()方法可以參閱document.createElement()一章節。
(2).innerHTML屬性可以參閱js innerHTML一章節。
(3).getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。
(4).insertBefore()方法可以參閱javascript insertBefore一章節。
相關文章
- jQuery將li元素插入列表中任意位置jQuery
- li列表的前面插入一個元素
- 如何利用jquery在任意指定li元素後面插入新的li元素jQuery
- jquery如何在li元素列表的開頭新增一個新li元素jQuery
- 在指定位置插入一個新的li元素程式碼例項
- JavaScript 插入新li元素JavaScript
- jQuery將li元素插入列表開頭jQuery
- 在ul的最後插入一個li元素程式碼例項
- javascript實現的交換li元素的位置程式碼例項JavaScript
- js 在陣列的指定索引位置插入一個新的元素JS陣列索引
- ul最後插入li元素
- javascript獲取當前li元素在集合中的位置JavaScript
- jQuery獲取當前li元素的下一個元素jQuery
- JavaScript獲取當前li元素的索引位置JavaScript索引
- jquery獲取指定li元素後面的第n個li元素jQuery
- javascript實現的獲取下一個li元素程式碼例項JavaScript
- 獲取ul元素下的所有li元素
- CSS 匹配第一個li元素CSS
- 獲取div元素下li元素的數目
- JavaScript 刪除指定的li元素JavaScript
- css匹配指定索引的li元素CSS索引
- 當前li元素的索引值索引
- jQuery點選的是第幾個li元素jQuery
- css數第二個li元素CSS
- css匹配第n個li元素CSS
- js刪除指定的li元素程式碼例項JS
- js實現li元素隔行背景變色例項程式碼JS
- javascript獲取li列表中的第幾個liJavaScript
- JavaScript獲取li元素的下標JavaScript
- jQuery 移除ul下指定的li元素jQuery
- ul li實現的新聞列表程式碼例項
- css如何實現文字在li元素中上下垂直居中CSS
- removeChild()刪除li元素REM
- css設定第2個li元素的樣式CSS
- CSS 第2個li元素樣式CSS
- JavaScript 獲取第n個li元素JavaScript
- jQuery查詢第n個li元素jQuery
- CSS 倒數第二個li元素CSS