Inside JavaScript
| Lists don't actually have specific methods that enable you to configure them on-the-fly ; but using methods that apply to all HTML elements, such as appendChild and replaceChild , you can change them yourself. Here's an example that we saw in Chapter 6 (Listing 06-03.html on the web site) that uses the appendChild method to add a new item to an unordered list, and the replaceChild method to replace the first item in the list (you'll need NS6+ if using Netscape Navigator for methods such as appendChild and replaceChild ): <HTML> <HEAD> <TITLE> Using the appendChild and replaceChild Methods </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function adder() { var item1 = document.createElement("LI") item1.innerHTML = "Next item" document.getElementById("list1").appendChild(item1) } function replacer(form) { var item1 = document.createElement("LI") item1.innerHTML = "Newer First Item" var lastItem = document.getElementById("list1").firstChild document.getElementById("list1").replaceChild(item1, lastItem) } --> </SCRIPT> </HEAD> <BODY> <H1>Using the appendChild and replaceChild Methods</H1> <FORM> <INPUT TYPE=BUTTON VALUE="Add New Item" ONCLICK="adder()"> <INPUT TYPE=BUTTON VALUE="Replace First Item" ONCLICK="replacer()"> </FORM> <UL ID="list1"> <LI>First Item <LI>Second Item <UL> </BODY> </HTML> Using this code, the user can add new items and replace the first item in a list, all just using buttons . You can see the results of this code in Chapter 6, in Figure 6.4. |