DOM中的JavaScript移动元素

Question

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

Answer 1

琐碎jQuery

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

如果您希望重复这样做，你就需要使用不同的选择，因为申报单将保留它们的ID，因为它们四处移动。

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

Answer 2

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 3

没有必要使用图书馆这样一个简单的任务：

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, third 

这考虑的事实：getElementsByTagName返回现场节点列表会自动更新以反映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, third 

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

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

例如:-)

Answer 4

jQuery的方法提到的顶部将工作。 你也可以使用JQuery和CSS。例如对于你已经应用了class1和div2的div，你已经应用了class class2（比如说每个css类都提供了浏览器上的特定位置），现在你可以使用jquery或JavaScript（这将改变位置）

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

这个功能看起来很奇怪，但它才能正常工作很大程度上依赖于标准的。实际上，它看起来好于the jQuery version that tvanfosson posted，它似乎只做了两次交换。

它依赖于什么标准特性？

insertBefore 在现有子节点refChild之前插入节点newChild。如果 refChild为空，则在 儿童列表的末尾插入newChild。 如果newChild是一个DocumentFragment对象，则它的所有子项都按 refChild之前的顺序插入 。 如果树中的newChild已经是 ，则首先将其删除。

Answer 6

对不起，撞到这个线程 我绊了“交换DOM元素”的问题，有点绕

结果发挥是一个jQuery天然的“解决方案”，这似乎是真的很漂亮（不幸的是我不知道什么在jQuery的内部发生这样做时）

验证码：

$('#element1').insertAfter($('#element2')); 

jQuery的文件说ŧ帽子insertAfter()移动的元素，并且不克隆它

Answer 7

。之前和。经过

运用现代香草JS！更好的方式/清洁剂比以前

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

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

Browser Support - 84％的全球，87％的美国作为'18三月