Dynamically create form elements

var createDOMForm = function () {
   // Where the form will be placed into the page
   var parentElement = document.getElementById("formGoesInsideThisDiv");
   cleanElement(parentElement);
  
   // Create a form
   try {
       var myForm = document.createElement("
");
   } catch (e) {
       var myForm = document.createElement("FORM");
       myForm.name = "myForm";
   }
   myForm.method = "post";
   myForm.action = "/webdev/creating_response_action";
   myForm.id = "myForm";
  
   // Create a radio selection
   try {
       var radioFieldA = document.createElement("");
       var radioFieldB = document.createElement("");
   } catch (e) {
       var radioFieldA = document.createElement("INPUT");
       radioFieldA.name = "myRadio";
       radioFieldA.checked = "true";
       var radioFieldB = document.createElement("INPUT");
       radioFieldB.name = "myRadio";
   }
   radioFieldA.type = "radio";
   radioFieldA.value = "true";
   myForm.appendChild(radioFieldA);
   myForm.appendChild(document.createTextNode("true"));
   myForm.appendChild(document.createElement("BR"));
   radioFieldB.type = "radio";
   radioFieldB.value = "false";
   myForm.appendChild(radioFieldB);
   myForm.appendChild(document.createTextNode("false"));
   myForm.appendChild(document.createElement("BR"));
  
   // Create a checkbox
   try {
       var checkbox = document.createElement("");
   } catch (e) {
       var checkbox = document.createElement("INPUT");
       checkbox.name = "myCheckbox";
       checkbox.checked = "true";
   }
   checkbox.type = "checkbox";
   myForm.appendChild(checkbox);
   myForm.appendChild(document.createTextNode("check?"));
  
   // Create a text field
   try {
       var textField = document.createElement("");
   } catch (e) {
       var textField = document.createElement("INPUT");
       textField.name = "myTextField";
   }
   textField.type = "text";
   textField.value = "text field";
   textField.style.display = "block";
   myForm.appendChild(textField);
  
   // Create a textarea
   try {
       var textArea = document.createElement("");
   } catch (e) {
       var textArea = document.createElement("TEXTAREA");
       textArea.name = "myTextArea";
   }
   textArea.appendChild(document.createTextNode("text area"));
   textArea.style.display = "block";
   myForm.appendChild(textArea);
  
   // Create a drop-down list
   try {
       var dropDown = document.createElement("");
   } catch (e) {
       var dropDown = document.createElement("SELECT");
       dropDown.name = "myDropDown";
   }
   dropDown.style.display = "block";
   for (var i=1; i<11; i++) {
       var option = document.createElement("option");
       option.value = "myOption" + i;
       option.appendChild(document.createTextNode("Option " + i));
       dropDown.appendChild(option);
   }
   dropDown.selectedIndex = 3;
   myForm.appendChild(dropDown);
  
   // Create a multi select drop-down list
   try {
       var dropDownMulti = document.createElement("");
   } catch (e) {
       var dropDownMulti = document.createElement("SELECT");
       dropDownMulti.name = "myDropDownMulti[]"; // The [] addon creates a parameter array
       dropDownMulti.size = 4;
       dropDownMulti.multiple = "true";
   }
   dropDownMulti.style.display = "block";
   for (var i=1; i<11; i++) {
       var option = document.createElement("option");
       option.appendChild(document.createTextNode("Option " + i));
       option.value = "myOption" + i;
       if (i==2 || i==4) {
           option.setAttribute("selected","true"); //option.selected = "true"; does not work in Opera (9.25 only?)
       }
       dropDownMulti.appendChild(option);
   }
   myForm.appendChild(dropDownMulti);
  
   // Create a button
   try {
       var newButton = document.createElement("");
   } catch (e) {
       var newButton = document.createElement("INPUT");
       newButton.name = "myButton";
   }
   newButton.type = "button";
   newButton.value = "Send AJAX Request";
   newButton.style.display = "block";
   newButton.onclick = function() {
       getAjaxResponse();
   }
   myForm.appendChild(newButton);
  
   // Place the form into the page
   parentElement.appendChild(myForm);
};

var cleanElement = function (el) {
   while (el.firstChild) {
       // nothing too fancy or fast here - removing all child elements to clean it out
       el.removeChild(el.firstChild);
   }
};

var getAjaxResponse = function () { // This function only works with MooTools
   new Ajax("/webdev/creating_response_action", {data: $("myForm"), update: $("responseGoesInsideThisDiv"), evalScripts: true}).request();
};