title: Javascript - How to append user input to a new list item in a form. (how to add a record)
body: <p>I am trying to create a to do list using just javascript. </p>
  
  <p>I want users to be able to add tasks to their to do list, and then sort by priority value, being low,medium,or high. I am appending the user input but not in the format I desire. I would like to output a new record containing inside an <code>&lt;li&gt;</code> element a new label, new checkBox input, and new select field for Priority. </p>
  
  <p>I am starting to get lost and believe I am over complicating the scripting, does anyone have any suggestions on how to create the new elements and append them to my <code>&lt;ul&gt;</code>?</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Page title&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
               #myForm{width: 600px; background: red;}
  
               #listContent{clear:both}
  
               legend h3{background:blue; margin-top: 30px;}
  
               #labels {margin-left: 70px; width:690px;}
               .listLabels{margin-right: 145px; font-family: sans-serif; font-style: italic; font-size: 20px;}
  
               ul {display: block; width: 500px;  background:blue;}
  
               li{clear: both; width: 600px; background: purple; list-style-type: none; padding: 2em 2em;}
  
               .label{display:block; float:left; width: 150px;}
  
               .checkBox{display: block; float: left; margin-left: 55px; width: 100px; color: green;}
  
               .selectPriority{display: block; width: 80px; float: right; color: blue;}
  
         #addMoreContent{clear:both;}
  
               .newLabel{display:block; float:left; width: 100px;}
  
               .inputText{display: block; width: 300px; float: left;}
  
               .addButton{display:block; width: 60px; }            
  
               #addSection{position: relative; width: 600px; background: brown; bottom:60px; left: 40px; padding-right: 50px; text-align:right;}
  
               target          
  
  
  
  &lt;/style&gt;
  &lt;script language="javascript"&gt;
  
  var counter = 0;
  
  function addNewItem(){
  // Target the user input
       var UserInput = document.getElementById('userInputText').value;
       var UserInputString = UserInput.toString();
          if (UserInputString==""){
  //Display error if field is left blank
          alert('Please add an item to the To-Do list.');
          }
  //Do this if user input is detected
  else {
            function CreateLiElement() {  
  
        var liElement = document.createElement("li");  
              var labelElement = document.createElement("label");
        var checkBoxElement = document.createElement("input");
              var selectElement = document.createElement ("select");
              var optionElement = document.createElement ("option");
              var userOption = document.getElementById ("userOption");  
  
        labelElement.setAttribute('class', 'label');
        checkBoxElement.setAttribute('type', 'checkBox')
              checkBoxElement.setAttribute('class','checkBox');
              selectElement.setAttribute('class','selectPriority')
              selectElement.setAttribute('name','priority')
              optionElement.setAttribute('value',userOption)   
  
        liElementItems = labelElement, checkBoxElement, selectElement, optionElement, userOption;  
        document.body.appendChild(liElementItems);  
  
        }  
  
            var y=document.getElementById('targetAdd')
        // variable x gets the innerhtml of the element above
        var x=y.innerHTML
        // alert just shows it on the screen. You can do whatever you want with x
        alert(x);
  
              alert('the function is complete');
              alert(UserInputString);
  
  
            var element = document.createElement('label'.className='label');
              var answer = document.createTextNode(UserInputString);
              alert(element)
              document.getElementById("listItems").appendChild(element).className=('label');
              document.getElementById("listItems").appendChild(answer);
              alert('the function is complete');
          }
  
  
          /*
              var Priority = new Array(3);
        Priority[0] = "High";
        Priority[1] = "Medium";
        Priority[2] = "Low";
              */
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
              &lt;form id="myForm" name="myForm" action="#" method="POST"&gt;
                          &lt;fieldset&gt;
                                      &lt;div id="listContent"&gt;                                  
                                                  &lt;legend&gt;&lt;h3&gt;My Tasks&lt;/h3&gt;&lt;/legend&gt;
                                                       &lt;div id="labels"&gt;
                                                                  &lt;span class="listLabels"&gt;&lt;strong&gt;To-Do&lt;/strong&gt;&lt;/span&gt;
                                                                  &lt;span class="listLabels"&gt;&lt;strong&gt;Completed&lt;/strong&gt;&lt;/span&gt;
                                                                  &lt;span class="listLabels"&gt;&lt;strong&gt;Priority&lt;/strong&gt;&lt;/span&gt;
                                                       &lt;/div&gt;
  
                                                          &lt;ul id="listItems" class="listItems"&gt;&lt;!-- begin list items --&gt;
  
                                                                  &lt;li&gt;
                                                                      &lt;label class="label"&gt;Make Iced Coffee&lt;/label&gt;
                                                                      &lt;input class="checkBox" type="checkBox" name="list1" id="list1" /&gt;
                                                                      &lt;select class="selectPriority" name="priority"&gt;
                                                                                      &lt;option value="low"&gt;Low&lt;/option&gt;
                                                                                      &lt;option value="medium"&gt;Medium&lt;/option&gt;
                                                                                      &lt;option value="high"&gt;High&lt;/option&gt;
                                                                    &lt;/select&gt;
                                                                  &lt;/li&gt;
  
                                                              &lt;li&gt;
                                                                  &lt;label class="label"&gt;Go take the dog for a run&lt;/label&gt;
                                                                  &lt;input  class="checkBox" type="checkBox" name="list2" id="list2" /&gt;
                                                                      &lt;select class="selectPriority" name="priority"&gt;
                                                                                      &lt;option value="low"&gt;Low&lt;/option&gt;
                                                                                      &lt;option value="medium"&gt;Medium&lt;/option&gt;
                                                                                      &lt;option value="high"&gt;High&lt;/option&gt;
                                                                    &lt;/select&gt;
                                                              &lt;/li&gt;
  
                                                              &lt;li&gt;
                                                                  &lt;label class="label"&gt;Apply for Jobs&lt;/label&gt;
                                                                  &lt;input class="checkBox"  type="checkBox" name="list3" id="list3" /&gt;
                                                                      &lt;select class="selectPriority" name="priority"&gt;
                                                                                      &lt;option value="low"&gt;Low&lt;/option&gt;
                                                                                      &lt;option value="medium"&gt;Medium&lt;/option&gt;
                                                                                      &lt;option value="high"&gt;High&lt;/option&gt;
                                                                    &lt;/select&gt;
                                                              &lt;/li&gt;
  
                                                              &lt;li&gt;
                                                                  &lt;label class="label"&gt;Work on JavaScript project&lt;/label&gt;
                                                                  &lt;input class="checkBox" type="checkBox" name="list4" id="list4" /&gt;
                                                                      &lt;select class="selectPriority" name="priority"&gt;
                                                                                      &lt;option value="low"&gt;Low&lt;/option&gt;
                                                                                      &lt;option value="medium"&gt;Medium&lt;/option&gt;
                                                                                      &lt;option value="high"&gt;High&lt;/option&gt;
                                                                    &lt;/select&gt;
                                                              &lt;/li&gt;
  
                                                      &lt;/ul&gt;&lt;!-- end list items --&gt;
                                      &lt;/div&gt;&lt;!-- end list content --&gt;
  
                                      &lt;div id="addMoreContent"
                                                  &lt;legend&gt;&lt;h3&gt;Add Task&lt;/h3&gt;&lt;/legend&gt;
                                                          &lt;ul&gt;
                                                                  &lt;li&gt;
                                                                      &lt;label class="newLabel" for="addTask"&gt;New Task:&lt;/label&gt;
                                                                      &lt;div id="targetAdd"&gt;
                                                                      &lt;input id="userInputText" class="inputText" type="text" /&gt;
                                                                      &lt;select id="userOption" class="selectPriority" name="priority"&gt;
                                                                                      &lt;option value="low"&gt;Low&lt;/option&gt;
                                                                                      &lt;option value="medium"&gt;Medium&lt;/option&gt;
                                                                                      &lt;option value="high"&gt;High&lt;/option&gt;
                                                                    &lt;/select&gt;
                                                                      &lt;/div&gt;
                                                                  &lt;/li&gt;
                                                          &lt;/ul&gt;
                                                          &lt;br&gt;&lt;br&gt;
                                                          &lt;div id="addSection"&gt;
                                                          &lt;button id="addItem"  class="addButton" type="button" onClick="addNewItem()"&gt;Add&lt;/button&gt;
                                                          &lt;/div&gt;
                                      &lt;/div&gt;&lt;!-- end add Content section --&gt;
                          &lt;/fieldset&gt;
              &lt;/form&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>