问题描述
怎么用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;
}
网友评论