DOM中的JavaScript移动元素

Question

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

Answer 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

这考虑了这样getElementsByTagName一个事实:返回一个活动的NodeList,它自动更新以反映DOM操作时元素的顺序.

你也可以使用:

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

例如 :-)

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

Answer 3

.之前和之后

使用现代香草JS!比以前更好/更清洁的方式

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

div2.after(div1);
div2.before(div3);

浏览器支持 - 截至2008年3月全球84%,美国87%

Answer 4

jQuery.fn.swap = function(b){ 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
};

并像这样使用它:

$('#div1').swap('#div2');

如果你不想使用jQuery,你可以很容易地适应这个功能.

Answer 5

var swap = function () {
    var divs = document.getElementsByTagName('div');
    var div1 = divs[0];
    var div2 = divs[1];
    var div3 = divs[2];

    div3.parentNode.insertBefore(div1, div3);
    div1.parentNode.insertBefore(div3, div2);
};

这个功能可能看起来很奇怪,但它很大程度上依赖于标准才能正常运行.事实上,它似乎比tvanfosson发布的jQuery版本更好,它似乎只进行了两次交换.

它依赖什么标准特性？

insertBefore在现有子节点refChild之前插入节点newChild.如果refChild为null,则在子项列表的末尾插入newChild.如果newChild是DocumentFragment对象,则在refChild之前以相同的顺序插入其所有子项.如果newChild已经在树中,则首先将其删除.