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.

Answer 1

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.

Answer 2

You can automate your clone with cloneJS. It's just a beta version: CloneJS

Answer 3

You could try something like this:

<div class="container">
  <div class="goodbye">
    Goodbye
    <div id="h1" class="hello">Hello</div>
  </div>
</div>

$('#h1').clone().attr('id','h2').appendTo('.container');

Answer 4

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" });