如何交換HTML標籤的位置？

如果我有HTML：如何交換HTML標籤的位置？

<div id="divOne">Hello</div> <div id="divTwo">World</div>

是否可以用CSS/JS/jQuery的這樣的divTwo內容出現在divOne位置，反之亦然圍繞掉呢？我只是想改變每個div的位置，所以我不希望任何涉及設置/交換每個div的HTML的解決方案。

這個想法是讓用戶自定義頁面上出現的訂單內容。我正在努力做到這一點，或者有更好的實現方法嗎？

來源

2010-12-10 mikel

如果知道使用jQuery並不難，你會感到欣慰的。

$("#divOne").before($("#divTwo"));

編輯：如果你在談論執行拖放和拖放功能訂購的div，看看jQuery用戶界面的排序插件... http://jqueryui.com/demos/sortable/

來源

2010-12-10 06:16:53

也許通過使用浮動。

#divOne { 
    float: right; 
} 

#divTwo { 
    float: left; 
}

YMMV。

來源

2010-12-10 06:15:55 alex

感謝您的回答，但我認爲我的例子並不是那麼好。在我的實際情況下，用戶可能會訂購10個或更多的div，但我不認爲浮動實際上是實用的。 – mikel 2010-12-10 06:23:18

@ miket2e不用擔心，很難知道它是否可以正常工作，而不需要任何HTML。 – alex 2010-12-10 06:39:40

http://snipplr.com/view/50142/swap-child-nodes/有碼換2元素與對方。

我還修改了相同的代碼，以便它還保留正在交換的元素及其子節點中的事件偵聽器（addEventListener）。

function swapNodes(node1, node2) { 
    node2_copy = node2.cloneNode(true); 
    node1.parentNode.insertBefore(node2_copy, node1); 
    node2.parentNode.insertBefore(node1, node2); 
    node2.parentNode.replaceChild(node2, node2_copy); 
}

來源

2011-04-26 09:02:07 user1651105

如何交換HTML標籤的位置？

回答

相關問題