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")[0]; 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>
上面的程式碼實現了在列表的開頭插入一個新的元素,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var obox=document.getElementById("box"),獲取id屬性值為box的元素物件。
(3).var obt=document.getElementById("bt"),獲取id屬性值為bt的元素物件。
(4).obt.onclick=function(){},為按鈕註冊click事件處理函式。
(5).var newLi=document.createElement("li"),建立一個li元素物件。
(6).newLi.innerHTML="本站的url地址是softwhy.com",設定新li元素的html內容。
(7).var tempOne=obox.getElementsByTagName("li")[0],獲取原來li元素集合中第一個li元素物件。
(8).obox.insertBefore(newLi,tempOne),將新元素插入到原來第一個li元素的前面。
二.相關閱讀:
(1).document.createElement()參閱document.createElement()一章節。
(2).innerHTML屬性參閱js innerHTML一章節。
(3).getElementsByTagName()參閱document.getElementsByTagName()一章節。
(4).insertBefore()參閱javascript insertBefore一章節。
相關文章
- js實現的在li元素列表的任意位置插入一個新的li元素JS
- jquery如何在li元素列表的開頭新增一個新li元素jQuery
- jQuery將li元素插入列表開頭jQuery
- jQuery將li元素插入列表中任意位置jQuery
- JavaScript 插入新li元素JavaScript
- 如何去掉li元素前面的黑點
- 在ul的最後插入一個li元素程式碼例項
- ul最後插入li元素
- 在指定位置插入一個新的li元素程式碼例項
- 如何利用jquery在任意指定li元素後面插入新的li元素jQuery
- jQuery獲取當前li元素的下一個元素jQuery
- CSS 匹配第一個li元素CSS
- javascript獲取li列表中的第幾個liJavaScript
- jquery獲取指定li元素後面的第n個li元素jQuery
- jQuery怎麼獲取li列表中的第幾個lijQuery
- css數第二個li元素CSS
- css匹配第n個li元素CSS
- CSS 第2個li元素樣式CSS
- JavaScript 獲取第n個li元素JavaScript
- jQuery查詢第n個li元素jQuery
- CSS 倒數第二個li元素CSS
- CSS匹配第一個li元素程式碼例項CSS
- 使用removeChild()函式動態刪除一個li元素REM函式
- css匹配最後一個li元素程式碼例項CSS
- jQuery點選的是第幾個li元素jQuery
- 如何將一個陣列中的元素插入另一個陣列陣列
- javascript實現的獲取下一個li元素程式碼例項JavaScript
- css設定第2個li元素的樣式CSS
- 獲取ul元素下的所有li元素
- jQuery獲取元素前面所有兄弟元素jQuery
- 獲取div元素下li元素的數目
- CSS 設定前n個li元素樣式CSS
- CSS 倒數第n個li元素樣式CSS
- JavaScript 獲取倒數第二個li元素JavaScript
- CSS 定義第二個li元素樣式CSS
- CSS設定第n個li元素樣式CSS
- CSS 設定第n個li元素樣式CSS
- JavaScript獲取倒數第二個li元素JavaScript