如何反转HTML的节点顺序

2018-02-03 本文已影响0人 Jassi

问题描述

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

初始.png
效果如下

效果.png

html代码如下

<body>
<ul id="target" style="background:red">
  <li>this is the target</li>
</ul>
<ul id="origin" style="background:green">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>    
  <li>6</li>
</ul>
</body>

方法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<ch_list.length;i++){
  str+=ch_list[i].outerHTML;
}
ul.insertAdjacentHTML('beforeend',str);

方法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<ch_list.length; i++){  
    fragment.appendChild(ch_list[i].cloneNode(true)); 
};
ul.appendChild(fragment);

方法4：

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

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

var fragment=document.createDocumentFragment();
for(let i=0;i<list.length;i++){
  
fragment.appendChild(list[i].cloneNode(true));
}

ul.insertBefore(fragment,ul.firstChild);

css部分：

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

方法5：

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

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