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

Using Lists

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> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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