DOM 中的 JavaScript 移动元素

javascript dom jquery

2022-08-30 05:37:11

假设我在一个页面上有三个元素。我如何交换第一个和第三个的头寸？jQuery很好。<div><div>

答案 1

没有必要使用库来完成这样一个微不足道的任务：

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[2].parentNode.insertBefore(divs[2], divs[0]); // order: third, first, second
divs[2].parentNode.insertBefore(divs[2], divs[1]); // order: third, second, first

这考虑了这样一个事实，即返回一个实时 NodeList，该列表会自动更新以反映 DOM 中元素在操作时的顺序。getElementsByTagName

您还可以使用：

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[0].parentNode.appendChild(divs[0]);           // order: second, third, first
divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, first

还有各种其他可能的排列，如果你想尝试的话：

divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0]));

例如：-）

答案 2

使用jQuery的琐碎

$('#div1').insertAfter('#div3');
$('#div3').insertBefore('#div2');

如果要重复执行此操作，则需要使用不同的选择器，因为 div 在移动时将保留其 ID。

$(function() {
    setInterval( function() {
        $('div:first').insertAfter($('div').eq(2));
        $('div').eq(1).insertBefore('div:first');
    }, 3000 );
});