添加包含动态属性值的HTML表单

The page I'm currently working on has an "add another" option, which inserts a fieldset containing a title and a list of 3 input boxes. Each of these input boxes, for form submission sake, needs to be given a name with an incremented value. ("field1_1", "field1_2" etc)

I know that I could add the fields by dynamically creating elements with $('<input/>', {...}); but for more than a few elements this makes for code that's hard to read and difficult to maintain.

I'm currently using jQuery's .load() function to pull in the file but through searching I can't find a way to pass variables to the response, and therefore can only use preset name attribute values.

Is this possible, or is the method above the only way?

Put your template into a dummy script, with unknown type to avoid errors:

<script id="template1" type="text/template">
    <h2>{title}</h2>
    <input type="text" name="field{id}_1">
    <input type="text" name="field{id}_2">
    <input type="text" name="field{id}_3">
</script>

Then use replace (with "g" global option as replace usually replaces first only) to insert your values.

var template = $('#template1').html();
template = Template.replace(/\{title\}/g, mytitle);    
template = Template.replace(/\{id\}/g, nextId);
$('#somewhere').append(template);

You can of course concatenate the replaces, but going for readable here.

This method allows complex HTML without messing up the code with loads of string manipulation. Your template looks like the final result so no mental translation required. Very low-maintenance technique.

The placeholders can just be simple names (without braces) to avoid regex delimiters, so long as the names will not match anything else in the template. I just use braces so the placeholders stand out in the template (again for maintenance purposes).