1

这让我发疯，这是一个在两个节点 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);
}

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

4

2 回答 2

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

这应该可以按您的意愿工作。

于 2013-02-05T12:23:20.280 回答
0

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

于 2013-02-05T12:31:13.023 回答