[Forms XHTML/Ajax] - Best way to add a dynamic amount of elements to a form?

Question

I have a complex form that has a static section and one that can have from 0 to many divs that containing radio buttons, textfields and textareas.

I'm wondering what's the best way to add elements to the section that has a variable amount of form inputs. I have a working solution, but it's probably not the best: I use javascript to add a chunk of html code and append it to the div containing the variable amount of input fields. In the code sample below, my javascript code would do something like

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

I would personally do something like:

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

This gives me more control in adding attributes and style there.

Answer 2

I think this largely depends on what you are doing elsewhere, and how many items you are adding, as well as how you want to add event handlers.

I tend to find it easier to use the DOM methods if I need to add event handlers, but if you are just adding to a form with a submit button, then using innerHTML is faster, as shown here: http://www.quirksmode.org/dom/innerhtml.html.