javascript實現的交換li元素的位置程式碼例項
在實際應用中,可能需要調換li元素之間的相互位置,下面就通過程式碼例項介紹一下如何實現此效果。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload= function() { var obox=document.getElementById("box"); var lis=obox.children; var obt=document.getElementById("bt"); obt.onclick=function(){ obox.insertBefore(lis[1],lis[3]) } } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> </ul> <input type="button" id="bt" value="檢視效果"> </body> </html>
上面的程式碼實現了我們的要求,能夠將原來的第二個li元素移動到第四個li元素之前。
程式碼比較簡單,關於insertBefore()函式可以參閱javascript insertBefore()一章節。
相關文章
- javascript實現的獲取下一個li元素程式碼例項JavaScript
- 在指定位置插入一個新的li元素程式碼例項
- javascript獲取li元素內容程式碼例項JavaScript
- js實現li元素隔行背景變色例項程式碼JS
- jQuery獲取指定的li元素程式碼例項jQuery
- js刪除指定的li元素程式碼例項JS
- js刪除li元素程式碼例項JS
- jQuery實現的獲取m到n之間的li元素程式碼例項jQuery
- ul li實現的新聞列表程式碼例項
- 獲取指定區間的li元素程式碼例項
- css元素位置固定程式碼例項CSS
- 原生就javascript實現的獲取子元素程式碼例項JavaScript
- javascript實現的清空表單元素內容程式碼例項JavaScript
- javascript實現的多元素緩衝運動程式碼例項JavaScript
- 獲取指定元素下所有li元素程式碼例項
- jquery動態新增li元素程式碼例項jQuery
- css匹配指定行li元素程式碼例項CSS
- js實現的在li元素列表的任意位置插入一個新的li元素JS
- 使用ul li實現的文章列表效果程式碼例項
- ul和li實現的新聞列表程式碼例項
- css匹配第n個li元素程式碼例項CSS
- jQuery調整li元素順序程式碼例項jQuery
- jQuery獲取所有的li元素程式碼例項jQuery
- js實現的元素運動程式碼例項JS
- jquery如何獲取li元素的前n個程式碼例項jQuery
- 在ul的最後插入一個li元素程式碼例項
- JavaScript獲取當前li元素的索引位置JavaScript索引
- javascript實現的動態設定元素透明度程式碼例項JavaScript
- javascript實現的驗證碼程式碼例項JavaScript
- javascript實現的補零程式碼例項JavaScript
- 通過拖動實現調整元素之間位置程式碼例項
- CSS匹配第一個li元素程式碼例項CSS
- jquery刪除前n個li元素程式碼例項jQuery
- css匹配最後一個li元素程式碼例項CSS
- js實現的通過拖動調整元素間的相對位置程式碼例項JS
- javascript元素內容漸現效果程式碼例項JavaScript
- js實現的元素抖動效果程式碼例項JS
- 原生javascript實現獲取指定元素下所有後代元素程式碼例項JavaScript