Using Lists | 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.