为什么表单按钮对页面 DOM 所做的更改在一段时间后会自动恢复？

Question

我想要做的是交换两个 HTML DOM 节点。

让我们采用以下 HTML 列表和下面的交换按钮：

    <ul class="center-text">
        <li>0</li>
        <li>1</li>
        <li>2</li>
    </ul>

    <form class="center-text">
        <button id="swapButton">Swap</button>
    </form>

这是我的 JS 代码：

// the "ready" method is the only jQuery method used in the code
$(document).ready(function(){
    document.getElementById("swapButton").onclick = function() {
        var ul = document.getElementsByTagName("ul")[0];

        // pseudo-swapping: insert "child2" before "child0"
        // (indexes are 1 and 5 because of the TextNodes between list nodes)
        ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1));                      
    }
});

因此，单击交换按钮时会发生以下情况：
物品确实被交换了。但不知何故，在（比方说 1/4）秒后，它们会恢复到原来的位置，即自动交换回来。 我的问题是：为什么？

PS：该代码仅用于教育目的，我只是尝试了解幕后发生的事情，所以请不要发布任何替代的 jQuery 方法。

Answer 1

$(document).ready(function(){
    document.getElementById("swapButton").onclick = function(e) {
        e.preventDefault();
        var ul = document.getElementsByTagName("ul")[0];
        ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1));                      
    }
});

这是因为按钮将页面重定向到同一页面。并恢复全部。您需要防止按钮的默认行为。