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);
}