向表单添加动态数量的元素的最佳方法？答案

【问题标题】：Best way to add a dynamic amount of elements to a form?向表单添加动态数量的元素的最佳方法？
【发布时间】：2010-06-25 21:17:14
【问题描述】：

我有一个复杂的表单，它有一个静态部分，一个可以有从 0 到多个包含单选按钮、文本字段和文本区域的 div。

我想知道将元素添加到具有可变数量的表单输入的部分的最佳方法是什么。我有一个可行的解决方案，但它可能不是最好的：我使用 javascript 添加一大段 html 代码并将其附加到包含可变数量输入字段的 div 中。在下面的代码示例中，我的 javascript 代码会执行类似

Javascript

document.getElementId('dynamic_form_stuff').innerHTML += "<div id='element3'>Form stuff</div>";

HTML

<form>
  <div id="static_form_stuff">
    form fields
  </div>

  <div id="dynamic_form_stuff">
    <div id="element1">
      Radio buttons stuff
      Text field stuff
      Text area stuff
    </div>      
    <div id="element2">
      Radio buttons stuff
      Text field stuff
      Text area stuff
    </div>
  </div>
</form>

【问题讨论】：

标签： ajax xhtml forms webforms

【解决方案1】：

我认为这在很大程度上取决于您在其他地方所做的事情、您要添加的项目数量以及您希望如何添加事件处理程序。

如果我需要添加事件处理程序，我倾向于使用 DOM 方法更容易，但如果您只是添加到带有提交按钮的表单，那么使用 innerHTML 会更快，如下所示：@987654321 @。

【讨论】：

感谢您的回答！所以我想我正处于“如果它没有坏，就不要修复它”的情况之一？它只是看起来不正确，而且有点难以维护。 sAc（下）显示的解决方案在某种程度上更干净，但就像我有许多元素（表格、输入、图像等）会放在 div“elements3”中一样令人困惑。我有一堆元素要创建和附加。
这取决于您是否要添加事件处理程序，或者您希望它呈现多快。这里有取舍。

【解决方案2】：

我个人会做这样的事情：

var elem = document.getElementId('dynamic_form_stuff');
var div = document.createElement('div'); // create element
div.setAttribute('class', 'myclass');  // define attributes
elem.appendChild(div);
// and/or more code.....

这让我可以更好地控制在那里添加属性和样式。

【讨论】：

样式应该由css来完成，使用innerHTML的时候很容易添加，但是更多的控制是一件好事，只要你不介意渲染时间更长。跨度>