Slimming down javascript code....Dynamic header on a static page with javascript

This element loads last and with delay on the page... I've created a dynamic header with an external javascript file for my static html page. I need help slimming down the code. Also, to call the function, I call the body onLoad method. Any suggestions on how to call this EXTERNAL function before ALL the contents of the page loads?

function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML;
var addHTML = 
 "<span>" + emptyHTML + "<a href='/broadcast_webcast/' class='catnav'>" + "Live     Broadcasts &amp; Webcasts" + "</a>" + "</span>"
  + "<span>" + "<a href='/business/' class='catnav'>" + "Business" + "</a>" + "</span>" 
  + "<span>" + "<a href='/celebrities/' class='catnav'>" + "Celebrities" + "</a>" + "</span>" 
  + "<span>" + "<a href='/culture/' class='catnav'>" + "Culture" + "</a>" + "</span>" 
  + "<span>" + "<a href='/education/' class='catnav'>" + "Education" + "</a>" + "</span>" 
  + "<span>" + "<a href='/energy/' class='catnav'>" + "Energy" + "</a>" + "</span>" 
  + "<span>" + "<a href='/entertainment/' class='catnav'>" + "Entertainment" + "</a>" + "</span>" 
  + "<span>" + "<a href='/environment/' class='catnav'>" + "Environment" + "</a>" + "</span>" 
  + "<span>" + "<a href='/fashion/' class='catnav'>" + "Fashion" + "</a>" + "</span>" 
  + "<br>" 
  + "<span>" + "<a href='/health/' class='catnav'>" + "Health &amp; Fitness" + "</a>" + "</span>" 
  + "<span>" + "<a href='/humanitarian/' class='catnav'>" + "Humanitarian" + "</a>" + "</span>" 
  + "<span>" + "<a href='/movies/' class='catnav'>" + "Movies" + "</a>" + "</span>" 
  + "<span>" + "<a href='/music/' class='catnav'>" + "Music" + "</a>" + "</s开发者_StackOverflowpan>"
  + "<span>" + "<a href='/hollywood/' class='catnav'>" + "Hollywood" + "</a>" + "</span>"

  + "<span>" + "<a href='/newyork/' class='catnav'>" + "New York City" + "</a>" + "</span>" 
  + "<span>" + "<a href='/scienceandtech/' class='catnav'>" + "Science &amp; Technology" + "</a>" + "</span>" 
  + "<span>" + "<a href='/sports/' class='catnav'>" + "Sports" + "</a>" + "</span>"
  + "<span>" + "<a href='/videogames/' class='catnav'>"+ "Video Games" + "</a>" + "</span>"

 document.getElementById("category_header").innerHTML = addHTML;

 var getNav = document.getElementById("navtop").innerHTML;
 var createNav = 
 "<span class='navtop'>" + getNav + "<a href='../' class='navtop'>" + "Home" + "</a>" + "</span>" 
 + "<span class='navtop'>" + "<a href='/contact-us' class='navtop'>" + "Contact Us" + "</a>" + "</span>"
 + "<span class='navtop'>" + "<a href='/our-expertise' class='navtop'>" + "Our Expertise" + "</a>" + "</span>"
 + "<span class='navtop'>" + "<a href='/worldwide-studios-offices/' class='navtop'>" + "Bader TV Worldwide Studios &amp; Offices" + "</a>" + "</span>"
 + "<span class='navtop'>" + "<a href='/careers' class='navtop'>" + "Careers" + "</a>" + "</span>" 
 + "<span class='navtop'>" + "<a href='/urgent-video-requests' class='navtop'>" + "Urgent video Requests" + "</a>" + "</span>"

 document.getElementById("navtop").innerHTML = createNav;   

}

ref: [badertv.com]

Step 1: Reduce Duplication (make a function which makes the span and a tags give a url and text.

Step 2: Use an array and loop for url and text.

function makeLink(url, text){
  return "<span><a href='"+url+"' class='catnav'>"+text+"</a></span>";
}
var url = ['/business/','/celebrities/',...];
var text = ['Business','Celebrities',...];
var out = '';
for(var i = 0; i < url.length; i++){
  out += makeLink(url[i],text[i]);
}

add any special cases and you're all set.

In both addHTML and createNav you have only one dynamic variable. Why the concatenation?

Addition: You can just put the whole thing in a function and call it at after you close the parent tag for the element that will hold the content (you can set two function if the two strings are not for the same container).

The slimming down I guess could go like this, it will spare you a few bytes but I wonder if it is worth the effort. For the loading part: calling this in body onload is safe because it probably guarantees that the getElementbyId will work. If you put a script tag near the end of the </body> tag it might work also but on different browser the behavior might be different (aka broken).

function link(linkText) {
  return "<span><a href='/" + linkText[0] + "/' class='catnav'>" + linkText[1] + "</a></span>";
}

function addHeaders(){ 
var emptyHTML = document.getElementById("category_header").innerHTML, 
    linkTexts = [ 
["broadcast_webcast", "Live Broadcasts &amp; Webcasts"],
["business", "Business"] 
// etc
],
addHtml;

addHtml = new [];
for (i=0;i<linkTexts.length;i += 1) {
  addHtml.push(link(linkTexts[i]));
}

document.getElementById("category_header").innerHTML = addHtml.join("");

// rest of the code 
}