javascript - 如何使用 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。我用Prototype :

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

然后将您的内容放入 $("product_"+prodId).innerHTML 中。