...

View Full Version : How do I dynamically add a list item?



don
01-20-2005, 08:25 PM
How do I add a list item to this list using JavaScript? I'd like to do it on the onLoad event to create a menu dynamically.

<div id="navmain">
<ul>
<li><a href="./home.htm">Home</a></li>
<li><a href="./sitemap.htm">Site Map</a></li>
</ul>
</div>

Also, what's a good site that breaks down DOM and DHTML similar to http://www.blooberry.com/indexdot/index.html for HTML and CSS?

Thanks,
Don


UPDATE:

I figured out how to add the <li>, but I wanted to add it between the "Home" and "Site Map" nodes.

For others, this is how I'm doing it now (not tidied up yet):

function navMainItem(text,href) {
a = document.createElement("a");
a.href = href;
a.appendChild(document.createTextNode(text));
li = document.createElement("li");
li.appendChild(a)
ul = document.getElementById("navmainul");
ul.appendChild(li);
}

don
01-20-2005, 11:06 PM
Never mind. I figured it out. Sorry for the blow by blow, folks.

If anyone cares, I hard-coded the ID of the sitemap item and call the navMainLoad() routine from the onLoad event of the <body>. I'll make it more generic, but for now...

function navMainItem(text,href) {
a = document.createElement("a");
a.href = href;
a.appendChild(document.createTextNode(text));
li = document.createElement("li");
li.appendChild(a)
ul = document.getElementById("navmainul");
ul.insertBefore(li, document.getElementById("navmainsitemap"))
}

function navMainLoad () {
navMainItem ("APPLE", "http://www.apple.com")
navMainItem ("GOOGLE", "http://www.google.com")
navMainItem ("APPLE", "http://www.apple.com")
navMainItem ("GOOGLE", "http://www.google.com")
navMainItem ("APPLE", "http://www.apple.com")
navMainItem ("GOOGLE", "http://www.google.com")
navMainItem ("APPLE", "http://www.apple.com")
navMainItem ("GOOGLE", "http://www.google.com")
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum