如何反转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;
icss部分：
#target{
transform:rotate(180deg);
}
#target li{
transform:rotate(-180deg);
}
方法5： 【如何反转HTML的节点顺序】采用css 布局
js部分同方法4。
css部分如下：
#target{
display:flex;
flex-direction:column-reverse;
}推荐阅读
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 如何寻找情感问答App的分析切入点
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- django-前后端交互
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- java中如何实现重建二叉树
- Linux下面如何查看tomcat已经使用多少线程
- leetcode|leetcode 92. 反转链表 II