1

これは、2 つのノード ul で 2 つのノードを交換する単純なスクリプトです。

// Html
<input type="button" onclick="swapItems()" value="Swap Items" />

//JavaScript
function swapItems() {
    var ul2 = document.getElementById("ul2");
    var first = ul2.firstChild;
    var last = ul2.lastChild;
    ul2.insertBefore(last, first);
}

それは機能しますが、変更されたリストを表示するには、ボタンをダブルクリックまたはトリプルクリックする必要があります。

4

2 に答える 2

1

ul2 の childNodes を見れば明らかです。ul2 の最初の子は空白のテキスト ノードで、最後の子も同様です。数回クリックする必要があるのは、空白のテキスト ノードを移動するためです。Web ページでは表示されませんが、Web インスペクタを使用すると、取得できるはずです。

コードを次のように変更できます。

function swapItems() {
    var ul2 = document.getElementById("ul2");
    var liChildren = ul2.getElementsByTagName('li');
    var first = ul2.liChildren[0];
    var last = ul2.liChildren[liChildren.length - 1];
    ul2.insertBefore(last, first);
}

それはあなたが望むように動作するはずです。

于 2013-02-05T12:23:20.280 に答える
0

#ul2 の空白を削除します。空白も子ノードと見なされます。

于 2013-02-05T12:31:13.023 に答える