反转有序列表的六个方法附代码，简单易懂

时间 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>

复制代码

欢迎留言！css3

反转有序列表的六个方法 附代码，简单易懂

反转有序列表的六个方法附代码，简单易懂