La meilleure façon d'ajouter une quantité dynamique d'éléments à un formulaire?

Question

J'ai une forme complexe qui a une section statique et une qui peut avoir de 0 à plusieurs divs qui contiennent des boutons radio, des champs de texte et des zones de texte.

Je me demande quelle est la meilleure façon d'ajouter des éléments à la section qui a une quantité variable d'entrées de formulaire. J'ai une solution de travail, mais ce n'est probablement pas le meilleur: J'utilise javascript pour ajouter un morceau de code html et l'ajouter à la div contenant le montant variable des champs de saisie. Dans l'exemple de code ci-dessous, mon code javascript ferait quelque chose comme

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

Je pense que cela dépend en grande partie de ce que vous faites ailleurs et du nombre d'éléments que vous ajoutez, ainsi que de la manière dont vous souhaitez ajouter des gestionnaires d'événements. J'ai tendance à trouver plus facile d'utiliser les méthodes DOM si j'ai besoin d'ajouter des gestionnaires d'événements, mais si vous ajoutez simplement un formulaire avec un bouton de soumission, l'utilisation de innerHTML est plus rapide, comme illustré ici: http://www.quirksmode.org/dom/innerhtml.html.

Answer 2

Personnellement, je faire quelque chose comme:

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

Cela me donne plus de contrôle dans l'ajout d'attributs et de style là-bas.