Как вы структурируете бесконечно масштабируемую форму, используя Javascript?

Question

У меня есть форма регистрации продукта, которая позволяет пользователю добавлять дополнительные поля продукта, нажав «Добавить продукт». Когда пользователь нажимает добавить продукт, Javascript создает новое поле продукта в существующем div.

В настоящее время я разрешаю добавлять до 10 продуктов в форму, поэтому я настраиваю структуру div следующим образом:

<div id="product1"></div>
<div id="product2"></div>
<div id="product3"></div> etc...

У меня есть один пустой div для каждой коробки продукта, который может быть добавлен пользователем. Я использую метод Javascript innerHTML для заполнения элементов div.

На мой вопрос: как я могу разрешить одновременное добавление неограниченного количества продуктов? Очевидно, что моя текущая установка не будет поддерживать это, так как мне нужно жестко программировать отдельные div для каждого потенциального продукта, чтобы в Javascript было определенное место для размещения большего количества данных.

ПРИМЕЧАНИЕ. Прежде чем кто-либо предложит использовать один элемент div и добавить в него новые данные, это не сработает. К сожалению, все данные, введенные в предыдущих полях, очищаются всякий раз, когда в div добавляется другое поле, путем добавления данных, подобных этому:

document.getElementById('product').innerHTML += <input name="product"> 

Answer 1

Вы можете легко динамически добавлять больше DIV. Я использую Прототип :

$("someContainerDiv").insert(new Element("div", { id: "product_"+prodId, 'class':'prod' }))

Затем поместите содержимое в $("product_"+prodId).innerHTML.

Answer 2

У меня есть одно слово, чтобы сказать jQuery :)

Пример (для создания входных данных для вашей формы на лету):

output = '';
for(i in products){
   output += '<div id="product_' + products[i].id + '">';
   output += '<input type="text" name="products[' + products[i].id + '][name]">';
   output += '<input type="text" name="products[' + products[i].id + '][price]">';
   output += '</div>';
}
$('#products_list').append(output);