如何反转HTML的节点顺序

问题描述

怎么用JS/css把 下图中绿色代码块中的li列表 反转后插入到红色代码块中

初始.png

效果如下

效果.png

html代码如下

  
this is the target


  
1
  
2
  
3
  
4
  
5
    
  
6

方法1：

倒叙依次将clone的节点append进入目标节点，该方法的缺点是for循环不断操作DOM，性能较差

var ul=document.getElementById("target");
var list=document.getElementById("origin").querySelectorAll("li");

for(var i = list.length-1; i >= 0; i--){  
    ul.appendChild(list[i].cloneNode(true)); 
};

方法2:

采用 innerHTML outerHTML insertAdjacentHTML等元素操作方法，for循环中直接拿到nodeList的代码源码，然后将代码源码一次append到目标节点中，该方法减少了操作DOM的次数

var ul=document.getElementById("target");
var list=document.getElementById("origin").querySelectorAll("li");

var ch_list=Array.prototype.slice.call(list);
ch_list.reverse();
var str="";
for(var i=0;i

方法3：

采用fragment+node节点操作，将nodeList先转移的fragment中，在将fragment中的节点再append到目标节点中

• 将nodeList 利用数组的方法反转
  
• 依次深拷贝反转后的nodeList 并append到fragment
  
• 将fragment append到目标节点

var ul=document.getElementById("target");
var list=document.getElementById("origin").querySelectorAll("li");
var ch_list=Array.prototype.slice.call(list);
 ch_list.reverse();

var fragment=document.createDocumentFragment();
for(var i = 0; i

方法4：

采用css的旋转属性
js部分：

var ul=document.getElementById("target");
var list=document.getElementById("origin")
        .querySelectorAll("li")

var fragment=document.createDocumentFragment();
for(let i=0;i

css部分：

#target{
  transform:rotate(180deg);
}
#target li{
  transform:rotate(-180deg);
}

方法5：

采用css 布局
js部分同方法4。
css部分如下：

#target{
  display:flex;
  flex-direction:column-reverse;  
}