Is it possible to clone html element objects in JavaScript / JQuery?

Question

Hi,

i am looking for some tipps how to solve my problem.

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

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 2

It's actually very easy in jQuery:

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

Change .appendTo() of course...

Answer 3

In one line:

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

Answer 4

With native javascript:

newelement = element.cloneNode(bool)

where the boolean indicates whether to clone child nodes or not

Answer 5

Thank you guys (all of you), worked flawlessly.