编写一个JS函数将列表子元素的顺序反转

要求：编写一个JS函数将列表子元素的顺序反转。

<ul id="target">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

方法一：DOM操作

var ul=document.getElementById("target");
var lists=ul.getElementsByTagName("li");
var len=lists.length;
while(len--){
    ul.appendChild(ul.children[len]);
    //将新的元素树添加到DOM树
};

缺点：每次循环都会影响DOM生成，会损耗性能。

方法二：使用文档片段

优化: 尽量减少操作DOM树的次数, 从而减少重排重绘。
如果父元素已经在页面上了，要添加多个平级子元素，则应该使用文档片段。
文档片段 是内存中临时存储多个子元素的虚拟父元素。
只要向网页中同时添加多个平级子元素时，都可用文档片段。

var ul=document.getElementById("target");
var lists=ul.getElementsByTagName("li");
var fragment=document.createDocumentFragment();
//创建文档片段
for(var i=lists.length-1;i>=0;i--){
    fragment.appendChild(lists[i]);
    //将子元素添加到文档片段
};
ul.appendChild(fragment);
//将文档片段整体添加到DOM树

方法三：数组反转

var ul=document.getElementById("target");
var lists=ul.getElementsByTagName("li");
//类数组对象
var children=Array.prototype.slice.call(lists,0);
//将类数组对象复制为数组，并选取指定位置的剩余元素
var len=children.length;
var str="";
children.reverse();
for(var i=0;i<len;i++){
   str+=children[i].outerHTML;
   //outerHTML除了包含innerHTML的全部内容外, 还包含外层整个标签
   //outerHTML为<li>x</li>
};
ul.innerHTML=str;

优点：性能较好。

方法四：字符串拼接

var ul=document.getElementById("target");
var lists=ul.getElementsByTagName("li");
var str="";
for(var i=lists.length-1;i>=0;i--){
  str+="<li>"+lists[i].innerHTML+"</li>";
};
ul.innerHTML=str;

**优点：**innerHTML效率最优。

更多内容，欢迎关注微信公众号“让知识成为资产”。