如何交换HTML标签的位置?

时间:2010-12-10 06:13:42

标签: javascript jquery html css

如果我有HTML:

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

是否可以使用CSS / JS / jQuery交换它,以便divTwo的内容出现在divOne的位置,反之亦然?我只是想改变每个div的位置,所以我不想要任何涉及设置/交换每个div的HTML的解决方案。

这个想法是让用户自定义页面上显示的订单内容。我正在努力做到这一点的好方法,还是有更好的方法来实现它?

3 个答案:

答案 0 :(得分:9)

要知道使用jQuery并不难,你会感到宽慰。

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

编辑:如果您正在讨论实现用于订购div的拖放功能,请查看jQuery UI的可排序插件... http://jqueryui.com/demos/sortable/

答案 1 :(得分:2)

也许使用花车。

#divOne {
   float: right;
}

#divTwo {
   float: left;
}

因人而异。

答案 2 :(得分:2)

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