如何交换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标签的位置？

回答

相关问题