Is it possible to Clone HTML Elements in jQuery with new ID and Name?

Question

I want to clone one row of a table, but when I clone, the new element's name and id will be the same as the element from which it was cloned.

What I need is the cloned elements with a different name and id.

Answer 1

I would pass prop a map of key/value pairs to update these values after cloning:

$("#selector").clone().prop({ id: "newId", name: "newName"});

Cloned elements don't exist in the DOM until you add them, so you're not going to have to worry about duplicate ids until you do that.

Example: http://jsfiddle.net/BbpRA/

Update: In the comment you say you have 20 inputs you need to clone. I would create a function that takes the DOM element and the new id and name. You could even make a small plugin out of it:

(function($) {
    $.fn.cloneWithProperties = function (properties) {
        return this.clone().prop(properties);
    };
})(jQuery)

Usage:

$("#selector").cloneWithProperties({ id: "newId", name: "newName" });

Answer 2

You can do something like:

var x = $("#selector").clone();

x.find('#oldID1').attr({id: "newID1", name: "newName1"});
x.find('#oldID2').attr({id: "newID2", name: "newName2"});
...

Once its done, you can append x to wherever you want.

Pls note that the #selector above refers to your table row element.