How can I clone everything in a div without cloning the outer div?

Question

I'd like to use jQuery.clone() but I only want to copy the inner elements, not the element itself. If needed I can wrap the contents but I was hoping to find another way to just clone the inner html.

Thanks.

have you tried .children().clone()? – Joseph Marikle Dec 15 '11 at 22:42 — Joseph Marikle, Dec 15 '11 at 22:42
@Guillaume86 http://stackoverflow.com/q/7392930 – lonesomeday Dec 15 '11 at 22:45 — lonesomeday, Dec 15 '11 at 22:45

score 3 · Accepted Answer · edited Dec 15 '11 at 22:47

3

Yup, you can use .children().clone()

http://jsfiddle.net/pR6ve/1

edited Dec 15 '11 at 22:47

Naftali

144,921
39
244
303

answered Dec 15 '11 at 22:44

Joseph Marikle

76,418
17
112
129

score 2 · Answer 2 · answered Dec 15 '11 at 22:42

2

You need to use contents to get all the child nodes (and their descendants):

$('#foo').contents().clone(true).appendTo('#bar');

answered Dec 15 '11 at 22:42

lonesomeday

233,373
50
316
318

yet another `$("#foo").clone(true).unwrap().appendTo("#bar");` – Andreas Louv Dec 15 '11 at 22:44
@AndreasAL No, because that would attempt to unwrap the clone of `#foo`, which is impossible because it doesn't have a parent element. You'd have to do `.clone(true).contents().unwrap()`. – lonesomeday Dec 15 '11 at 22:49

How can I clone everything in a div without cloning the outer div?

2 Answers2