我想做的是交换两个 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 方法。
最佳答案
$(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));
}
});
这是因为按钮将页面重定向到同一页面。并恢复所有。您需要阻止按钮的默认行为。
关于javascript:交换 DOM 节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14827708/