DHTML ULs?

[bubonic]

I've come across a situation where I want my users to be able to make a dynamic list of things, and then commit the entire list to the database after they have finished making it.

What I'd like to have is a simple text input field that had a button to the right of it that simply reads "Add". When the user enters input into the text field and clicks "Add", an unordered list somewhere else on the page loads a new bullet with the newly-added text input.

The only problem is... I can't seem to figure out how to dynamically change lists. And, even more scary than that, from what I can collect, the HTML DOM doesn't even support this function!

Here's my code:


<script type="text/javascript">
function AddToList()
{
var newItem = document.getElementById("newItem").value;

// if newItem = "Widget", then I need to add
// <li>Widget</li> to the-list... but how?!?!
}
</script>

<input type="text" id="newItem" size="30"/>&nbsp;
<input type="button" value="Add" onClick="AddToList();"/>

<p>

<ul id="the-list">
</ul>


Thanks for any input

[Asperon]

Something like this:



<script type="text/javascript">
function AddToList()
{
var theList = document.getElementById("the-list");
var newItem = document.getElementById("newItem".value;

// Now append the innerHTML
theList.innerHTML += "<li>"+newItem+"</li>";

}
</script>

<input type="text" id="newItem" size="30"/>&nbsp;
<input type="button" value="Add" onClick="AddToList();"/>

<p>

<ul id="the-list">
</ul>


Committing it to the database is a whole different story. Your best bet is to save each item into an array and then use AJAX to send it to a PHP page