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

Question

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

I have an html element (e.g. select box input field) in a table. Now I want to copy the object and generate a new one from the copy, as well as using JavaScript or jQuery. I think this should work somehow, but I'm a little clueless at the moment.

Something like this (pseudo code):

oldDdl = $("#ddl_1").get(); newDdl = oldDdl; oldDdl.attr('id', newId); oldDdl.html(); 

Answer 1

Using your code, you can do something like this in plain JavaScript using the cloneNode () method:

 // Create a clone of element with id ddl_1: let clone = document.querySelector('#ddl_1').cloneNode( true ); // Change the id attribute of the newly created element: clone.setAttribute( 'id', newId ); // Append the newly created element on element p document.querySelector('p').appendChild( clone ); 

Or using the jQuery clone () method (not the most efficient):

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

Answer 2

With native JavaScript:

 newelement = element.cloneNode(bool) 

where a boolean value indicates whether to clone child nodes or not.

Here is the complete MDN documentation .

Answer 3

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

 var foo1 = jQuery('#foo1'); var foo2 = jQuery('#foo2'); foo1.html(foo2.children().clone()); 

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

Answer 4

This is actually very simple in jQuery:

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

Change .appendTo (), of course ...

Answer 5

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

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

FIDDLE HERE

Answer 6

Try the following:

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

Answer 7

In one line:

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

Answer 8

You need to select "# foo2" as a selector. Then enter html ().

Here is the html:

 <div id="foo1"> </div> <div id="foo2"> <div>Foo Here</div> </div>​ 

Here is the javascript:

 $("#foo2").click(function() { //alert("clicked"); var value=$(this).html(); $("#foo1").html(value); });​ 

Here is jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/