• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Altering Lists > Adding to Lists

Adding to Lists

We'll start our little journey with a simple example. We'll start with a list that doesn't have any items in it and allow the user to add whatever items they want. Example 4-1 shows what our page looks like with only HTML (no JavaScript yet).

Example 4-1. List-changing HTML

<html>
<head>

<title>list manipulation</title>

<style type="text/css">
#addToList{ position: absolute; top:10; left: 10; }
#list { position: absolute; top:10; left: 250; }

.copy {
    font-family: verdana, sans-serif;
    font-size: 11px;
}
</style>

</head>

<body bgcolor="#FFFFFF">

<div id="addToList" class="copy">
<form name="listForm">
Add an item to your To Do list: <br>
<input type="text" name="todo" size="30"
class="copy"><br>
<input type="button" value="Add to End of List"
class="copy">
</form>
</div>

<div id="list" class="copy">
<ul></ul>
</div>

</body>
</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint