title: appendChild not working?
body: <p>Ok,so I've been reading up on JS and decided to create a quiz app to practice my new skills.So basically it's going to a fancy app that asks State Capitals one at a time,and gives the correct answer immediately.This is the HTML:</p>
  
  <pre><code>&lt;header&gt;
      &lt;h1&gt;The All-Star State Capitals Quiz.&lt;/h1&gt;
      &lt;h3&gt;How well do you know your state capitals?&lt;/h3&gt;
  &lt;/header&gt;
  &lt;section id = "main"&gt;
  &lt;div id = "playArea"&gt;
      &lt;div id = "questionArea"&gt;
      &lt;/div&gt;
      &lt;div id = "answerArea"&gt;
          &lt;input  name = "choices" id = "answerA" type = "radio"&gt;
          &lt;br&gt;
          &lt;input name = "choices" id = "answerB" type = "radio"&gt;
          &lt;br&gt;
          &lt;input name = "choices" id = "answerC" type = "radio"&gt;
          &lt;br&gt;
          &lt;input name = "choices" id = "answerD" type = "radio"&gt;
      &lt;/div&gt;
      &lt;!--button--&gt;
      &lt;div&gt;
          &lt;input type = "button" id = "nextQuestion" value = "Next Question"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;div id = "quizState"&gt;
          &lt;p id = "result"&gt;&lt;/p&gt;
          &lt;p id = "correctAnswer"&gt;&lt;/p&gt;
          &lt;p id = "scoreSoFar"&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>So my idea was to do a separate JS MVC ish thing to update both the questionArea and answerArea dynamically.the questionarea is easy with ".innerHTML" but the answerArea is giving me a headache because I cannot get it to update the choices using appendChild(i'm using chrome on Mac).This is the js:</p>
  
  <pre><code>var view = 
      {
          displayQuestion:function(quiztion)
          {
              var questionArea = document.getElementById("questionArea");
              questionArea.innerHTML = quiztion;
          },
          displayAnswers: function(answers)
          {
  
              var answerArea = document.getElementById("answerArea");
              var inputs = document.getElementsByName("choices");
              for(var i = 0;i&lt;inputs.length;i++)
              {
                  var answer = answers[i];
                  var lblTxt = document.createTextNode(answer);
                  var lbl = document.createElement("label").appendChild(lblTxt);
                  inputs[i].appendChild(lbl);
              }
          }
  
      }
  
  view.displayQuestion("1.What is the capital of Massachusetts?");
  view.displayAnswers(["A.Boston","B.New Haven","C.Albany","D.Hartford"]);
  </code></pre>
  
  <p>so basically my problem is that I cannot update the choice radio buttons to the displayAnswer test example.Funny thing is I can see the choices in the DOM,without the "label" tag as I wanted.Any help?</p>