Question

我有一个复杂的表单，它有一个静态部分，可以有0到多个包含单选按钮，文本字段和textareas的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>

Answer 1

我个人会这样做：

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.....

这使我在添加属性和样式方面有了更多的控制权。

Answer 2

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

如果我需要添加事件处理程序，我倾向于发现使用DOM方法更容易，但如果您只是添加一个带有提交按钮的表单，那么使用innerHTML会更快，如下所示： http://www.quirksmode.org/dom/innerhtml.html

向表单添加动态数量元素的最佳方法是什么？

2 个答案: