Is it possible to clone html element objects in Ja

Question

I am looking for some tips on how to solve my problem.

I have a html element (like select box input field) in a table. Now I want to copy the object and generate a new one out of the copy, and that with JavaScript or jQuery. I think this should work somehow but I'm a little bit clueless at the moment.

Something like this (pseudo code):

oldDdl = $("#ddl_1").get(); 

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Answer 1

Try this:

$('#foo1').html($('#foo2').children().clone());

Answer 2

The jQuery way (not the most efficient):

Look at the clone() method of JQuery

Using your code you can do something like that:

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want

Answer 3

In one line:

$('#selector').clone().attr('id','newid').appendTo('#newPlace');

Answer 4

Yes, you can copy children of one element and paste them into the other element:

var foo1 = jQuery('#foo1');
var foo2 = jQuery('#foo2');

foo1.html(foo2.children().clone());

Proof: http://jsfiddle.net/de9kc/

Answer 5

It's actually very easy in jQuery:

$("#ddl_1").clone().attr("id",newId).appendTo("body");

Change .appendTo() of course...

Answer 6

You can use clone() method to create a copy..

$('#foo1').html( $('#foo2 > div').clone())​;

FIDDLE HERE