title: Add a new list item to a <ul> item when using a for loop with JavaScript
body: <p>I'm creating a quiz whilst I learn JavaScript. I have created an array of objects that act as the question, potential answers and the correct answer. I am stuck on trying to go through each of the potential answers, using a for loop, and adding these an existing  I have created. I am creating the item with the following code:</p>
  
  <pre><code>var questChoices = function() {
      for(var i = 0; i &lt; allQuestions[currQues].choices.length; i++){
          var choiceHTML = '&lt;li&gt;&lt;input type="radio" name="choices" id="choice' + [i] + 1 +'"';
          choiceHTML += ' value="' + allQuestions[currQues].choices[i].toLowerCase() + '"' + ' /&gt;';
          choiceHTML += '&lt;label for="choice' + [i] + 1 +'"' + '&gt;';
          choiceHTML += allQuestions[currQues].choices[i] + '&lt;/label&gt;';
          choiceHTML += '&lt;/li&gt;';
          choicesHTML.appendChild(choiceHTML);
      }
  } 
  
  questChoices();
  </code></pre>
  
  <p>When the page loads and calls this function I get the following error in the console:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Failed to execute appendChild' on 'Node': parameter 1 is not of type 'Node'.</p>
  </blockquote>