title: Javascript add li to ul using array
body: <p>I am working on a spelling game for my children, and I want to display a spelling list based on what they enter and an array that is created. 
  Here is the link to my project on github <a href="https://github.com/urock24/myWebSite.git" rel="nofollow">https://github.com/urock24/myWebSite.git</a></p>
  
  <p>Here is the code in question, javascript first </p>
  
  <pre><code>function populateSpellList() {      
      // for loop should run through spelling list array and create list items in "listSpelling"
  
      for (var i = 0; i &lt; spellingList.length; i++ ) {
          // create a new li
          var newLI = document.createElement("li");
          var indSpellingWord = spellingList[i];
  
          // grab the spelling list item 
          var newContent = document.createTextNode(indSpellingWord);
  
          // add the spelling list item to the li
          newLI.appendChild(newContent);
  
          // get the unordered list and add the new li
          var displaySpellList = document.getElementById("listSpelling");     
  
          displaySpellList.appendChild(newLI);
      }   
  }
  </code></pre>
  
  <p>And the HTML</p>
  
  <pre><code>&lt;div id = "theSpellingList"&gt;
  
              &lt;h3&gt;The Spelling List&lt;/h3&gt;
              &lt;ul id = "listSpelling"&gt;
                 &lt;li&gt;test &lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>I can get an alert to pop up for me after every line in the function except the last, and it only seems to pop up once. But no matter what happens it is not displaying any list items in that list. </p>
  
  <p>I have seen a lot of jquery examples on here so I am definitely going to be pursuing learning jquery, but for now "plain" javascript would be great.</p>