更改元素的順序

Question

我正在創建浮動寬度的網站。用戶使用從全高清分辨率到智能手機大約600像素的屏幕，這似乎是一個不錯的主意。這帶來了一個非常有趣的問題。

當用戶使用比最佳分辨率更小的分辨率時，頁面會獲得更多高度。這意味着改變某些元素的順序（例如某些圖像，搜索框或導航）可能會很有用，以使頁面更加可讀，而不需要太多的嘲諷。

所以我需要能夠訪問DOM並更改一些頁面元素的順序（交換它們）。

可以說我有一個列表，需要更換項目1和2

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

我發現，通過使用功能appendChild基於已追加項目元素<ul>的解決方案。然而，文本節點存在一個問題，因爲需要重新創建它，因此對於更難的元素結構來說它會變得非常複雜。

你有什麼建議可以改進它嗎？

Answer 1

對於這個簡單的情況下（交換的僅有的兩個元素），可以簡單地使用appendChild()（fiddle）

var list = document.querySelector("ul"); 
list.appendChild(list.firstElementChild); 

相同的節點不能在多個位置存在;所以，它會從當前位置移除並放置在集合的末尾。

如果你想要做更復雜的排序，你可能應該創建一個從的childNodes（yaf）的數組，並讓所有瘋狂：

var list = document.querySelector("ul"); 
var items = list.querySelectorAll("li"); 
var sortedList = Array.from(items).sort(function(a, b) { 
    var c = a.firstElementChild.textContent, 
    d = b.firstElementChild.textContent; 
    return c < d ? -1 : c > d ? 1 : 0; 
}); 
for (let item of sortedList) { 
    list.appendChild(item); 
} 

Answer 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;