Javascript create multiple links?

There are various aspects of your methods which can be made "easier":

links = new Array();

Can be better-written as links = [];. (almost) everything you'll come across in Javascript is already an object, so being verbose about it doesn't add clarity.

links[1]="first..."
links[2]="second...";

can be better-written using .push(), so that you don't need to specify each index, eg:

links.push("first");
links.push("second");

or, if you're doing it all at once, using an array-literal, eg:

links = [
    "first",
    "second"
];

less-nice, in my opinion, but also an option, could be a mixture of both, using .concat():

links = [
    "first",
    "second"
];

links = links.concat([
    "third",
    "fourth"
]);

It might make sense to group things together using an array of bare objects, too:

sections = [
    {
        heading: '<span class="asep">First section...</span>',
        links: [
            '<a href="#">First</a>',
            '<a href="#">Second</a>'
        ]
    },
    {
        heading: '<span class="asep">Second section...</span>',
        links: [
            '<a href="#">Third</a>',
            '<a href="#">Fourth</a>'
        ]
    },
];

function writeLinks(){
    var html = "";
    for( var i = 0; i < sections.length; i++ ){
        var section = sections[i];
        html += section.heading + section.links.join("");
    }
    document.getElementById('nav1').innerHTML = html;
}
setTimeout(writeLinks, 0);

Note also the use of .join("") to join all elements of an array together as strings.

Next, you've got a lot of duplication in your code. You could specify only the parts which are different, eg:

sections = [
    {
        heading: "First section...",
        links: [
            "First",
            "Second"
        ]
    },
    /* ...snip... */
];

function writeLinks(){
    var html = "";
    for( var i = 0; i < sections.length; i++ ){
        var section = sections[i];
        html += '<span class="asep">' + section.heading + "</span>";
        for( var j = 0; j < section.links.length; j++ ){
            html += '<a href="#">' + section.links[j] + "</a>";
        }
    }
    document.getElementById('nav1').innerHTML = html;
}
setTimeout(writeLinks, 0);

You could get rid of some of that raw HTML and simplify some of the loops, etc, by using a common library, such as jQuery or Prototype. This would also allow you to actually check that the document is ready for you to operate on it, rather than using that fragile setTimeout() hack. eg:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
/* ...snip... */
$(function(){
    var nav = $("<div />").attr("id", "nav1");
    $.each(sections, function(i,section){
        nav.append( $("<span />").addClass("asep").text(section.heading) );
        $.each(section.links, function(i,link){
            nav.append( $("<a />").attr("href", "#").text(link) );
        }
    }

    $("#nav1").replaceWith( nav );
});
</script>

All of those may be considered "easier" depending on your mood.

var arr = [];
arr[0] = <span class='asep'>Body Jewelry</span>;
arr[1] = <span class='asep'>Do Something</span>;

function writeLinks(){
    document.getElementById("nav1").innerHTML = arr.join("");
}

Array.Join is faster than concat operation .

This might be a bit overkill, but you might want to look at a client side framework that supports models and templates, such as backbone.js. Then you could store all your links in a model which can easily be changed (and will automatically update the view for you through events), and you can also use underscore.js templates so you don't have to write any html as a string literal.