Anchors on the fly in IE

[jsGreenhorn]

Hello all,

I'm attempting to generate some internal navigation on the fly based off of level three headings on any particular page. For every 'h3' I'll have a link, based off the contents of the 'h3', linking to an anchor exactly one node above it.

I have about 90% success with this so far; Everything's working fine except IE7 (i'll worry about graceful degradation to IE 5-6 later).

In IE, everything is generated and the anchors are placed correctly, but the links don't do a thing. Only when I place the anchors into the HTML manually do the links decide to work. I've tried every go-around I can think of but i'm currently at a loss. I've included my code below. Thoughts?

function build_navList(){
var bodyAry = document.getElementsByTagName('body');
var body = bodyAry[0];
var navList = document.createElement("ul");
	navList.setAttribute("id", "navList");
var navItems = document.getElementsByTagName('h3');
	if (navItems[0] == null)
		{
		return
		}
	else 
		{
			if (typeof window.attachEvent != "undefined"){	
			//Note: This loop is for IE systems/	
			for (var i=0; i<navItems.length; ++i)
				{
				var h3Anchor = document.createElement('a')
				h3Anchor.setAttribute("name",navItems[i].innerText);
				navItems[i].parentNode.insertBefore(h3Anchor,navItems[i])
				
				var navLinkItem = document.createElement("li");
				var navLink = document.createElement("a");
				navLink.setAttribute("class", "internalNavLink");	
				navLink.setAttribute("href",window.location.hash='' + "#" + navItems[i].innerText);	
				var navLinkName = navItems[i].innerText;
				var navLinkNameText = document.createTextNode(navLinkName)
				navLink.appendChild(navLinkNameText);
				navLinkItem.appendChild(navLink);
				navList.appendChild(navLinkItem);
				}
			}
			
			else
			{
			//Note: This loop is for other 'modern' browsers  like FireFox, Safari and Opera	
			for (var i=0; i<navItems.length; ++i)
				{
				var h3Anchor = document.createElement('a')
				h3Anchor.setAttribute("name",navItems[i].textContent);
				navItems[i].parentNode.insertBefore(h3Anchor,navItems[i])
				
				var navLinkItem = document.createElement("li");
				var navLink = document.createElement("a");
				navLink.setAttribute("class", "internalNavLink");	
				navLink.setAttribute("href","#" + navItems[i].textContent);	
				var navLinkName = navItems[i].textContent;
				var navLinkNameText = document.createTextNode(navLinkName)
				navLink.appendChild(navLinkNameText);
				navLinkItem.appendChild(navLink);
				navList.appendChild(navLinkItem);
				}	
			}
		}
	var navListHolder = document.createElement('div');
	navListHolder.setAttribute("id", "navListHolder");
	navListHolder.appendChild(navList);
	body.appendChild(navListHolder);	
}

[jsGreenhorn]

I found my problem lying the the use of the "name" attribute. When I changed this and started targeting 'id's, everything worked normally.

For those who care, here's the new code:

function build_navList(){
var bodyAry = document.getElementsByTagName('body');
var body = bodyAry[0];
var navList = document.createElement("ul");
	navList.setAttribute("id", "navList");
var navItems = document.getElementsByTagName('h3');
	if (navItems[0] == null)
		{
		return
		}
	else 
		{
			//Note: This loop is for IE browsers. Here I will make an link based off all h3's in the page.	
			if (typeof window.attachEvent != "undefined"){	
			for (var i=0; i<navItems.length; ++i)
				{
				var h3Anchor = document.createElement('a')
				h3Anchor.setAttribute("id",navItems[i].innerText);
				navItems[i].parentNode.insertBefore(h3Anchor,navItems[i])
				
				var navLinkItem = document.createElement("li");
				var navLink = document.createElement("a");
				navLink.setAttribute("class", "internalNavLink");	
				navLink.setAttribute("href",window.location.hash='' + "#" + navItems[i].innerText);	
				var navLinkName = navItems[i].innerText;
				var navLinkNameText = document.createTextNode(navLinkName)
				navLink.appendChild(navLinkNameText);
				navLinkItem.appendChild(navLink);
				navList.appendChild(navLinkItem);
				}
			}
			else
			{
			//Note: This loop is for other 'modern' browsers  like FireFox, Safari and Opera. Same h3 ideas.	
			for (var i=0; i<navItems.length; ++i)
				{
				var h3Anchor = document.createElement('a');
				h3Anchor.setAttribute("id",navItems[i].textContent);
				navItems[i].parentNode.insertBefore(h3Anchor,navItems[i]);
				
				var navLinkItem = document.createElement("li");
				var navLink = document.createElement("a");
				navLink.setAttribute("class", "internalNavLink");	
				navLink.setAttribute("href","#" + navItems[i].textContent);	
				var navLinkName = navItems[i].textContent;
				var navLinkNameText = document.createTextNode(navLinkName);
				navLink.appendChild(navLinkNameText);
				navLinkItem.appendChild(navLink);
				navList.appendChild(navLinkItem);
				}	
			}
		}
		//Note: Now I'm generating an "back to top" link based of the initial h1 found on the page and placing it at the top of the nav list
		var h1Ary = document.getElementsByTagName('h1');
		var topH1 = h1Ary[0];
		topH1.setAttribute("id", "topOfPageAnchor")
		var bck2TopLinkItem = document.createElement('li');
		var bck2TopLink = document.createElement('a');
		var bck2TopLinkTxt = document.createTextNode('Back To Top');
		bck2TopLink.appendChild(bck2TopLinkTxt);
		bck2TopLinkItem.appendChild(bck2TopLink);
		bck2TopLinkItem.setAttribute("id","backToTopLink");
		bck2TopLink.setAttribute("href","#topOfPageAnchor");
		
		var firstNavLinkItem = navList.firstChild
		firstNavLinkItem.parentNode.insertBefore(bck2TopLinkItem,firstNavLinkItem)
		
		
	//Note: Now i'm pinning my findings to the page.		
	var navListHolder = document.createElement('div');
	navListHolder.setAttribute("id", "navListHolder");
	navListHolder.appendChild(navList);
	body.appendChild(navListHolder);	
}