Question

这让我疯狂，这是一个在两个节点ul中交换两个节点的简单脚本：

// 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);
}

它可以工作，但我必须双击或三击按钮才能看到更改后的列表。

Answer 1

如果你看一下ul2的childNodes，它就会变得明显。 ul2的第一个子节点是空白文本节点，最后一个子节点也是如此。您必须单击几次的原因是您正在移动空白文本节点。您无法在网页上看到它，但如果您使用网络检查器，您应该可以选择它。

您可以将代码更改为：

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);
}

这应该可以按你的需要工作。

Answer 2

删除＃ul2中的空格。空格也被视为子节点。

JavaScript insert在不更新之前 - 需要双击或高音点击

2 个答案: