要素の順序を変更する

Question

私は浮動幅のウェブサイトを作成しています。ユーザーはフルHD解像度からスマートフォンで約600pxまでの画面を使用していますが、これはかなり良い考えです。これは非常に興味深い問題を引き起こします。

ユーザーが最適な解像度よりも小さい解像度を使用すると、ページの高さがさらに高くなります。つまり、いくつかの要素の順序（たとえば、画像、検索ボックス、ナビゲーションなど）を変更して、ページを読みやすくする必要がなくなり、読みやすくすることができます。

DOMにアクセスしてページ要素の順序を入れ替える必要があります（スワップする必要があります）。

は、私がリストを持っており、項目1および2

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

私は機能appendChildを使用して<ul>にすでに項目の要素を追加し基づいて解決策を見つけたを交換する必要があるとしましょう。しかし、テキストノードには問題があります。そして、それをもう一度作り直す必要があるので、より難しい要素構造のためにそれを行うことは本当に複雑になります。

改善のためのアドバイスがありますか？この単純な場合（2つのだけの要素を交換する）ため

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;