将div1的内容放入div2 onclick事件中

Question

我有两个div如下：

<div id='div1'>
    <p>Hello world!</p>
</div>

<div id='div2'>

</div>

<a id='test' href='javascript:void()'>Click me to fill in div2</a>

我一直想知道使用jquery以div1 onclick填充div2的最佳方法是什么？

<div id='div1'>
        <p>Hello world!</p>
    </div>

Answer 1

使用.contents()，.clone()和.append()将$("#div1")的内容克隆到$("#div2")：

$("#div2").append($("#div1").contents().clone());

Answer 2

而不是依赖于序列化到HTML然后将其应用于其他元素，如Andy's answer does，克隆节点会更好。

$('#test').click(function(e) {
    e.preventDefault();
    $('#div1').contents().clone(true).appendTo('#div2');
});

这具有以下优点：克隆的元素上的任何数据或事件将继续存在于新元素上。由于我使用了e.preventDefault()，您也可能会丢失代码的javascript:void位，因为链接的默认操作已被阻止。

请参阅jQuery API：

• contents
• clone
• appendTo
• event.preventDefault

Answer 3

$('#div2').html($('#div1').html());