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

javascript jquery clone elements
Richard picture Richard · May 28, 2009 · Viewed 112.2k times · Source

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

annakata picture annakata · May 28, 2009

With native JavaScript:

newelement = element.cloneNode(bool)

where the Boolean indicates whether to clone child nodes or not.

Here is the complete documentation on MDN.

Related questions

How to jQuery clone() and change id?

I need to clone the id and then add a number after it like so id1, id2, etc. Everytime you hit clone you put the clone after the latest number of the id. $("button").click(function() { $("#id").clone().after("#id"); });

Read More
Cloning an object in javascript

The below first logs 0, and then logs 1. How do I store a copy of the object, rather than a reference to it? debug.log(vi.details.segment); vi.nextSegment = vi.details; vi.nextSegment.segment++; debug.log(vi.details.segment);

Read More
Is there a method to clone an array in jQuery?

This is my code : var a=[1,2,3] b=$.clone(a) alert(b) Doesn't jQuery have a 'clone' method? How can I clone an array using jQuery?

Read More