我正在创建一个浮动宽度的网站。用户在智能手机上使用从全高清分辨率到大约 600 像素的屏幕，这似乎是一个不错的主意。这带来了一个非常有趣的问题。
当用户使用比最佳分辨率更小的分辨率时，页面的高度会更高。这意味着更改某些元素（例如某些图像、搜索框或导航）的顺序可能很有用，以使页面更具可读性而无需太多滚动。
所以我需要能够访问 DOM 并更改某些页面元素的顺序（交换它们）。
假设我有一个列表，需要交换项目 1 和 2。
<ul>
<li>1</li>
<li>2</li>
</ul>
我找到了一个基于<ul>使用 function将已有的 items 元素附加到的解决方案appendChild。然而，文本节点存在一个问题，对于更困难的元素结构，它变得非常复杂，因为需要再次重新创建它。
你有什么改进的建议吗？
对于这个简单的情况（交换仅有的两个元素），您可以使用appendChild()：
(() => {
const list = document.querySelector("ul");
list.appendChild(list.firstElementChild);
})();<ul>
<li>List-item #1</li>
<li>List-item #2</li>
</ul>同一个节点不能存在多个位置；因此，它从当前位置移除并放置在集合的末尾。
如果你想做更复杂的排序，你可能应该从 childNodes 创建一个数组并疯狂：
(() => {
const frag = document.createDocumentFragment();
const list = document.querySelector("ul");
const items = list.querySelectorAll("li");
const sortedList = Array.from(items).sort(function(a, b) {
const c = a.textContent,
d = b.textContent;
return c < d ? -1 : c > d ? 1 : 0;
});
for (let item of sortedList) {
frag.appendChild(item);
}
list.appendChild(frag);
})();<ul>
<li>Dogs</li>
<li>Snakes</li>
<li>Cats</li>
<li>Bugs</li>
</ul>您可以使用 flex 非常轻松地更改 HTML 元素的顺序。
flexorder: 0通过更改订单值，您可以决定元素在列中的显示位置
const ascButton= document.getElementById('asc')
const decButton= document.getElementById('dec')
//callback function for soring in ascending order
const ascending = (a,b)=> a.innerHTML - b.innerHTML
//callback function for soring in descending order
const descending = (a,b)=> b.innerHTML - a.innerHTML
let currentOrder = ascending
ascButton.addEventListener('click', ()=>{
currentOrder = ascending
order()
})
decButton.addEventListener('click', ()=>{
currentOrder = descending
order()
})
const order = function(){
const ordered = [...document.getElementsByClassName('col')].sort(currentOrder)
ordered.forEach((elem, index)=>{
elem.style.order = index
})
}
order().row{
display: flex;
flex-direction: column;
}
.col{
padding: 20px;
border: 1px solid gray;
margin: 5px;
order:3;
}<div class="row">
<div class="col " id="one">1</div>
<div class="col " id="two">2</div>
<div class="col " id="three">3</div>
<div class="col " id="ten">10</div>
<div class="col " id="four">4</div>
<div class="col " id="five">5</div>
</div>
<button id="asc">ASC</button>
<button id="dec">DESC</button>你可以在这里找到一个更复杂的实现https://jsfiddle.net/nijeesh4all/on5rsax8/
交换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;
}