js利用appendChild對<li>標簽進行排序的實現(xiàn)方法
更新時間：2016年10月16日 09:32:37 投稿：jingxian
下面小編就為大家?guī)硪黄猨s利用appendChild對<li>標簽進行排序的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
按照從大到小排序
appendChild：
假設(shè)父級a中已經(jīng)有子節(jié)點b，那么a.appendChild(b)的作用是：1.先將子節(jié)點b從父級a中刪除；2.再將子節(jié)點b添加到a中，放在最末尾。
<body>
<button id="bt1">提交</button>
<ul id="ul1">
<li>32</li>
<li>243</li>
<li>43</li>
<li>24</li>
<li id="t">2</li>
<li>84</li>
<li>84</li>
<li>25</li>
</ul>
</body>
<script>
window.onload=function(){
var oUl1=document.getElementById('ul1');
var oBt=document.getElementById('bt1');
oBt.onclick=function(){
var oLi=document.getElementsByTagName('li');
var arr=[];
//將<li>標簽放入空的arr數(shù)組中
for(var i=0;i<oLi.length;i++){
arr[i]=oLi[i];
}
//sort排序，數(shù)組中每個元素都是一個<li>,所以要用innerHTML
arr.sort(function(li1,li2){
var n1=parseInt(li1.innerHTML);
var n2=parseInt(li2.innerHTML);
return n1-n2;
})
//通過appendChild進行排序
for(var i=0;i<arr.length;i++){
oUl1.appendChild(arr[i]);
}
}
}
</script>
以上就是小編為大家?guī)淼膉s利用appendChild對標簽進行排序的實現(xiàn)方法全部內(nèi)容了，希望大家多多支持腳本之家~
您可能感興趣的文章:
- 初學js插入節(jié)點appendChild insertBefore使用方法
- javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說明
- js中AppendChild與insertBefore的用法詳細解析
- 走馬燈效果代碼js appendChild實現(xiàn)的無縫滾動
- js原生appendChild的bug解決心得分享
- js AppendChild與insertBefore用法詳細對比
- javascript appendChild,innerHTML,join性能比較代碼
- javascript使用appendChild追加節(jié)點實例
- JS中appendChild追加子節(jié)點無效的解決方法
相關(guān)文章
JavaScript 獲取當前日期時間 年月日 時分秒的方法
這篇文章主要介紹了JavaScript 獲取當前日期時間年月日時分秒的方法,通過案例代碼介紹了獲取當前日期方法,代碼簡單易懂,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了原生javascript實現(xiàn)圖片彈窗交互效果的方法及的相關(guān)資料,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄猨s實現(xiàn)對table的增加行和刪除行的操作方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
解決JSON.stringify()自動將中文轉(zhuǎn)譯成unicode的問題
下面小編就為大家分享一篇解決JSON.stringify()自動將中文轉(zhuǎn)譯成unicode的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
onsubmit阻止form表單提交與onclick的相關(guān)操作
return false會阻止表單提交，基本上關(guān)于onsubmit=return false有以下幾點要注意的地方，學習后臺編程的朋友一定要知道。2010-09-09
本文主要介紹了原生js實現(xiàn)旋轉(zhuǎn)木馬輪播圖效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進行控制的實現(xiàn)代碼
這篇文章主要介紹了小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進行控制的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
深入理解基于vue-cli的webpack打包優(yōu)化實踐及探索
這篇文章主要介紹了基于vue-cli的webpack打包優(yōu)化實踐及探索，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
JavaScript類型相關(guān)的常用操作總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript類型相關(guān)的常用操作，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-02-02
JavaScript增加數(shù)組中指定元素的5種方法總結(jié)
在JS中數(shù)組方法是非常重要且常用的的方法,在此整理總結(jié)一番,下面這篇文章主要給大家介紹了關(guān)于JavaScript增加數(shù)組中指定元素的5種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02