title: Updating an HTML list using Js
body: <p>So I have a js game like scrabble. Now when the user makes a new word, I would like the word to be added to a list that is displayed in a div on my page.
  The issue is I quite don't understand, how I could keep my old word created and insert a new word with new formatting and everything in a list form.</p>
  
  <p>I know there is a list tag -- </p>
  
  <pre><code>&lt;ul&gt;
       &lt;li&gt;apple&lt;/li&gt;
       &lt;li&gt;ball&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but what I can't really figure out is how do I use java script to enter the word as a new list entry.</p>
  
  <p>I have used js to display the word created by the following syntax</p>
  
  <pre><code>document.getElementById('currentword').innerHTML = word;
  </code></pre>
  
  <p>where word is the variable that holds the current word created and <em>currentword</em> is the div id. but how do I use this kind of syntax for a list?
  Please help! </p>
  
  <p>Thanks</p>
  
  <p>EDIT: I would also like the last entry to the list as the first item on my list. Seems like the list populates itself but the latest entry gets hidden and the list doesn't really auto scroll down as the items are added.
  PS: Also incase someone knows how I could replace the tacky scroll bar option generated by CSS to a custom scroll bar. It would be great if you could point me in the correct direction!</p>