put content of div1 into div2 onclick event

Question

I have two divs as follows:

<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>

I have been wondering what should be the best way to fill in div2 with the content of div1 onclick using jquery in order to have

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

score 5 · Accepted Answer · answered Oct 04 '11 at 22:13

5

Append a clone of the contents of $("#div1") to $("#div2") using .contents(), .clone(), and .append():

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

answered Oct 04 '11 at 22:13

gilly3

87,962
25
144
176

Why would you not do the simpler `$('#div2').html($('#div1').html());`? – Hari Pachuveetil Oct 04 '11 at 22:15
2

@Floyd - See [this question](http://stackoverflow.com/q/7392930/361684) for a discussion on the merits of direct dom manipulation versus innerHTML manipulation. – gilly3 Oct 04 '11 at 22:22
Thanks for pointing me to that question. Helped put things into the right perspective! – Hari Pachuveetil Oct 04 '11 at 22:33

score 2 · Answer 2 · edited May 23 '17 at 11:47

Rather than resorting to serialising to HTML and then applying that to the other element, as Andy's answer does, it would be nicer to clone the nodes.

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

This has the advantage that any data or events on the elements cloned will continue to exist on the new elements. Since I've used e.preventDefault(), you can also lose the javascript:void bit of your code, because the link's default action has been prevented.

See the jQuery API:

score 1 · Answer 3 · answered Oct 04 '11 at 22:09

1

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

answered Oct 04 '11 at 22:09

Andy

29,707
9
41
58

put content of div1 into div2 onclick event

3 Answers3