Updating an HTML list using Js

So I have a js game like scrab开发者_如何学JAVAble. 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.

I know there is a list tag --

<ul>
     <li>apple</li>
     <li>ball</li>
</ul>

but what I can't really figure out is how do I use java script to enter the word as a new list entry.

I have used js to display the word created by the following syntax

document.getElementById('currentword').innerHTML = word;

where word is the variable that holds the current word created and currentword is the div id. but how do I use this kind of syntax for a list? Please help!

Thanks

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!

---

Given a list:

<ul id="theList" >
     <li>apple</li>
     <li>ball</li>
</ul>

you could add an <li> like this (assuming that the variable word contains the word you want to add):

document.getElementById('theList').innerHTML += ('<li>'+word+'</li>');

There are other ways too, but this one is probably the simplest.

---

I use jQuery for dom manipulation and would recommend the same for you, it adds a lot of readability and tons of neat (x-browser friendly) functionality.

For example... the append api call would do the job if you were using jQuery.

<ul id="words">
 <li>Some Word</li>
 <li>Another Word</li>
</ul>

$("#words").append("<li>" + yourNewWord + "</li>");

Or with straight javascript...

document.getElementById('words').innerHTML += '<li>' + yourNewWord + '</li>';

EDIT: I believe in motools the equivalent to .append is .grab

---

Basic idea:

var li = document.createElement("li");
li.innerHTML = "new text";
document.getElementById("TheULsId").appendChild(li);

---

<ul>
 <li>apple</li>
 <li>ball</li>
</ul>

then,

var newListItem = $('<li></li>').html("myNewWord");

$("ul").append(newListItem);

---

Well to the exact solution of my question, I figured out the rest from mootools docs :)

This fiddle demonstrated most of it.. http://jsfiddle.net/WngSS/1/

As for the scroll bar goes, well to customize ur own scrollbar you just use css effects.