如何复制div标签？

Question

当用户单击#Duplicate按钮时，如何复制#DvRefer元素及其内容？

<div id='DvRefer'>
    <div style="float: right; margin-right: 5px; margin-top: 8px;">name:</div>
    <select id="LstRefer" runat="server" style="margin-top: 8px; margin-right: 14px;float: right; margin-left: 8px; width: 205px;">
    </select>
</div>
<div style="clear:both"></div>
<div style="text-align: left">
    <input id="Duplicate" type="button" runat="server" value="Duplicate" class="buttons" />
</div>                                     

Answer 1

试试这个：

var cloneCount = 0;
$("#Duplicate").click(function() {
    $("#DvRefer").clone()
        .attr("id", "DvRefer_Clone" + cloneCount)
        .insertAfter("#DvRefer");
    $("#LstRefer", "#DvRefer_Clone" + cloneCount)
        .attr("id", "LstRefer_Clone" + cloneCount);
    cloneCount++;
});

您可以看到，我还更改了克隆元素的id，以避免重复的ids，这是无效的，并且会给您带来问题。

更新

已修复以支持多个克隆的div。如果您不想使用全局变量，则可以使用隐藏的输入元素来存储计数器。

Answer 2

查看jQuery clone()函数。以下是取自该网站的一个示例：

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

$('.hello').clone().appendTo('.goodbye');