Лучший способ добавить динамическое количество элементов в форму?

Question

У меня есть сложная форма, которая имеет статический раздел и может содержать от 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>

Answer 1

Я думаю, что это во многом зависит от того, что вы делаете в другом месте, и от того, сколько элементов вы добавляете, а также от того, как вы хотите добавить обработчики событий.

Мне легче использовать методы DOM, если мне нужно добавить обработчики событий, но если вы просто добавляете в форму с помощью кнопки отправки, то использование innerHTML быстрее, как показано здесь: http://www.quirksmode.org/dom/innerhtml.html.

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

Это дает мне больше контроля при добавлении атрибутов и стиля.