title: JQuery append li to exist ul
body: <p>I searched a lot and made lots of changes, but I still cannot find a solution.</p>
  
  <p>What I want to do is after clicking a button, remove all li in ul and append some other new li in this ul.</p>
  
  <p>HTML is:</p>
  
  <pre><code>&lt;ul id = "wordPrediction"&gt;
      &lt;li class="nextWord"&gt;foot&lt;/li&gt;
      &lt;li class="nextWord"&gt;hand&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>I first use following code to remove all li:</p>
  
  <pre><code>$('#wordPrediction li').each(function(){
      $("#wordPrediction li").fadeOut(500, function(){ 
          $("#wordPrediction li").remove(); 
      });
  });
  </code></pre>
  
  <p>Then I try to append all elements in nextWordArray to this ul, I tried:</p>
  
  <pre><code>for (var i=0;i&lt;nextWordArray.length;i++){
      $('#wordPrediction').append($("&lt;li class=\"nextWord\"&gt;"+nextWordArray[i] +"&lt;/li&gt;"));
  }
  </code></pre>
  
  <p>But I failed, specifically, when I have nextWordArray = ['actor'], which means my nextWordArray.length = 1. I cannot append successfully. </p>