Javascript 更改元素的顺序

我正在创建一个浮动宽度的网站。用户在智能手机上使用的屏幕分辨率从全高清到600px左右，这似乎是个不错的主意。这带来了一个非常有趣的问题

当用户使用比最佳分辨率更小的分辨率时，页面将获得更高的高度。这意味着更改某些元素（例如某些图像、搜索框或导航）的顺序可能会很有用，从而使页面更具可读性，而无需太多的搜索

所以我需要能够访问DOM并更改某些页面元素的顺序（交换它们）

假设我有一个列表，需要交换第1项和第2项

<ul>
  <li>1</li>
  <li>2</li>
</ul>

一,
二,

我找到了一个解决方案，它通过使用函数

appendChild

将已经存在的items元素附加到

。但是，文本节点存在一个问题，对于更困难的元素结构，由于需要重新创建整个元素结构，因此执行此操作变得非常复杂

您有什么改进的建议吗？

对于这个简单的情况（仅交换两个元素），您可以使用

appendChild（）

：

（（）=>{
const list=document.querySelector（“ul”）；
list.appendChild（list.firstElementChild）；
})();

清单项目#1
清单项目#2
交换innerHTML难道不起作用吗

var myList = document.getElementsByTagName("ul")[0]; 
temp = myList.getElementsByTagName("li")[0].innerHTML;
myList.getElementsByTagName("li")[0].innerHTML = myList.getElementsByTagName("li")[1].innerHTML;
myList.getElementsByTagName("li")[1].innerHTML = temp;

在2018年（以及几年前），这一点只需要CSS就可以实现。您的用例将通过以下方式解决：

ul {
  display: flex;
  flex-direction: column;
}

li:nth-child(2) {
  order: -1;
}

您可以使用flex非常轻松地更改HTML元素的顺序

flex
order:0
通过更改order值，可以确定元素在列中的显示位置


const ascButton=document.getElementById（'asc'））
const decButton=document.getElementById（'dec'）
//用于按升序排序的回调函数
常量升序=（a，b）=>a.innerHTML-b.innerHTML
//按降序排序的回调函数
常量递减=（a，b）=>b.innerHTML-a.innerHTML
让currentOrder=升序
ascButton.addEventListener（'click'，（）=>{
当前顺序=升序
订单（）
})
decButton.addEventListener（'click'，（）=>{
当前顺序=降序
订单（）
})
常量顺序=函数（）{
const ordered=[…document.getElementsByClassName（'col'）].sort（currentOrder）
ordered.forEach（（元素，索引）=>{
elem.style.order=索引
})
}
订单（）
.row{
显示器：flex；
弯曲方向：立柱；
}
上校{
填充：20px；
边框：1px纯色灰色；
保证金：5px；
顺序：3；
}

1.
2.
3.
10
4.
5.
ASC
DESC
是时候投资学习jQuery了。这使这类活动变得容易多了。你能说得更具体一点吗？我现在已经知道了这个库，但是一些到API的链接对此很有用。您尝试过使用jQuerySortable吗？在写入innerHTML时要小心，它可能会对事件处理程序和其他此类属性产生不必要的影响。当您尝试使用document.body时会发生这种情况，但在本例中不会。一个简单的例子->太糟糕了
flex
不起作用/在字段集上有缺陷：（我喜欢在你更复杂的例子中使用
data-*
属性。它更清楚地说明了过滤的内容。我喜欢使用flex-order的想法，谢谢！