反轉有序列表的六個方法附代碼，簡單易懂

時間 2019-11-08

標籤反轉有序列表六個方法代碼簡單易懂简体版

原文原文鏈接

innerHTML方法
reverse()方法
直接的dom操做 appendChild
採用文檔碎片fragment方法
經過flex佈局，方向設置爲列反轉 flex-direction:column-reverse
經過css3屬性transform 180度旋轉整個列表再180度旋轉當個列表項

須要調試哪一個方法，將相應代碼的註釋標誌去掉就好~~css

<body>    
<ul id="target" style="background:red">        
    <li>1</li>        
    <li>2</li>        
    <li>3</li>        
    <li>4</li>        
    <li>5</li>            
    <li>6</li>    
</ul>
</body>
<script>    
//一、innerHTML方法
//   var ul = document.getElementById('target');
//     var list = ul.getElementsByTagName('li');
//     var str = "";
//     for(var i = list.length-1; i >= 0; i--){
//     str += "<li>" + list[i].innerHTML + "</li>";//     }
//     ul.innerHTML=str;    

//二、reverse()方法
// var ul = document.getElementById('target');
// var chil_arr = Array.prototype.slice.call(ul.getElementsByTagName('li'), 0);//由於getElementByTagName獲取到的是僞數組，因此要進行轉換
// var str = '';// chil_arr.reverse();
// for(var i = 0; i < chil_arr.length; i++){
//     str += chil_arr[i].outerHTML;  //outerHTML會返回li節點自己 而不僅是裏面的數字
// }
// ul.innerHTML=str;    


//三、直接的dom操做   appendChild
// var ul = document.getElementById('target');
// var list = ul.querySelectorAll('li');
// ul.innerHTML=""
// for(var i = list.length-1; i>=0; i--){
//     ul.appendChild(list[i].cloneNode(true)); 
// }    


// 四、採用文檔碎片fragment方法
// var ul = document.getElementById('target');
// var list = ul.querySelectorAll('li');
// ul.innerHTML=""
// var fragment = document.createDocumentFragment();
// for(var i = list.length-1; i >= 0; i--){
//     fragment.appendChild(list[i]);
// }
// ul.appendChild(fragment);
</script>

<style>    
/*五、經過flex佈局，方向設置爲列反轉 flex-direction:column-reverse*/
/* #target
{        
    display:flex;        
    flex-direction:column-reverse;      
} */

/**6.經過css3屬性transform   180度旋轉整個列表  再180度旋轉當個列表項/
/* #target
{  
transform:rotate(180deg);
}

#target li
{  
transform:rotate(-180deg);
} */
</style>

複製代碼