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三月