Cloning and renaming form elements with jQuery

Question

I am looking for an effective way to either clone/rename or re-create address fields to offer ability to submit multiple addresses on the same page. So with form example like th

Answer 1

In theory, the simplest way would be to clone then change name:

var newaddress= $("#addresses div.address").eq(0).clone();
newaddress.find('input').each(function() {
    this.name= this.name.replace('[0]', '['+i+']');
});
$('#addresses').append(newaddress);

However:

a. jQuery's clone() is a really nasty piece of work. On IE, it serialises the nodes to HTML, processes the HTML string with regex (!) to remove its bodge-job internal ID attributes and then asks the browser to re-parse it. This is one of my least favourite parts of jQuery: it's highly error-prone, loses some information, and is slow (not that speed matters for the quite small job you seem to be doing here).

The browser's native cloneNode(true) method is much better, but you can't really use it if you're doing jQuery stuff because it will copy jQuery's internal ids, potentially confusing its scripting. Ugh. What a mess.

b. When you change an input's name, whether that's by input.name as here or using attr() as in your example, there are issues in IE<=7.

In particular, though it will submit the inputs with the correct control name, they won't be indexed under the right name in the form.elements HTMLCollection (or on form itself, though you shouldn't use that anyway). This isn't necessarily a problem if you are selecting inputs based on IDs or jQuery selectors rather than the old-school HTMLCollection interface. Worse is that radio buttons, if you use any, won't be properly name-grouped.

If this is a concern for you I'm afraid using innerHTML/html() to create the div, as in pst's answer, is your only option. (You can always combine the two, creating using HTML then changing the other attributes and text content using text(), attr(), val() etc. to avoid the usual HTML-escaping problems when you go around sticking text strings into HTML.)