How to create a menu with DOM and Javascript?

I'm making a web application, and I have to make a menu that is repeated on multiple pages. But every time I make a change in any menu I have to edit all pages. Javascript may create a menu something like this (this is an occurrence):

var divMenu = document.getElementById( "menu" );
//create element <ul> to add to div menu.
var ulMenu = document.createElement("ul");
ulMenu.value =
  "<ul id='nav'>"
  + "<li class='current'><a href='/sytematic_inventory/views/administrador/index.jsp'>Inicio</a></li>"
  + "<li><a href=''>Inventarios</a></li> "
  + "</ul>";

divMenu.appendChild( ulMenu );

How is this possible?

var divMenu = document.getElementById( "menu" );
//create element <ul> to add to div menu.
var ulMenu = document.createElement("ul");
ulMenu.value =
  "<ul id='nav'>"
  + "<li class='current'><a href='/sytematic_inventory/views/administrador/index.jsp'>Inicio</a></li>"
  + "<li><a href=''>Inventarios</a></li> "
  + "</ul>";

divMenu.appendChild( ulMenu );

How is this possible?

Share Improve this question edited Dec 2, 2012 at 1:18 dda 6,2132 gold badges27 silver badges35 bronze badges asked Dec 2, 2012 at 1:15 Cristian 1,4785 gold badges32 silver badges66 bronze badges

Put it in a .js file and then include it in every page? – Derek 朕會功夫 Commented Dec 2, 2012 at 1:20
3 Please stop writing HTML in JS. – PeeHaa Commented Dec 2, 2012 at 1:22
While you could use JavaScript to generate a menu on each page, it is a much better solution to use a server-side language to do this. Some of the fallbacks of a JavaScript-based approach: browsers with JavaScript disabled will not be able to see the menu; most search engines will not execute JavaScript and may not be able to spider your whole site. – icktoofay Commented Dec 2, 2012 at 1:27

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

Create a remote .js file and do something along the lines of the following:

(function(){

    // All items we'd like to add
    var navItems = [
        {href: 'http://google.', text: 'Google'},
        {href: 'http://bing.', text: 'Bing'},
        {href: 'http://stackoverflow.', text: 'StackOverflow'}
    ];

    // A few variables for use later
    var navElem = document.createElement("nav"),
        navList = document.createElement("ul"), 
        navItem, navLink;

    navElem.appendChild(navList);

    // Cycle over each nav item
    for (var i = 0; i < navItems.length; i++) {
        // Create a fresh list item, and anchor
        navItem = document.createElement("li");
        navLink = document.createElement("a");

        // Set properties on anchor
        navLink.href = navItems[i].href;
        navLink.innerHTML = navItems[i].text;

        // Add anchor to list item, and list item to list
        navItem.appendChild(navLink);
        navList.appendChild(navItem);
    }

    // Set first list item as current
    navList.children[0].className = "current";

    // Add list to body (or anywhere else)
    window.onload = function () {
        document.body.appendChild(navElem);
    }

}());

Demo: http://jsfiddle/sDbff/3/

Then, in any page you'd like to include this, drop in a reference to it:

<!DOCTYPE html>
<html>
    <head>
        <title>My Site</title>
        <script src="navigation.js"></script>
    </head>
    <body>
        <p>Navigation will be appended here.</p>
    </body>
</html>

You need to create all the DOM items.

e.g.

var divMenu = document.getElementById( "menu" );
//create element <ul> to add to div menu.
var ulMenu = document.createElement('ul');
ulMenu.setAttribute('id', 'nav');
var liItem = document.createElement('li');
liItem.setAttribute('class', 'current');

ulMenu.appendChild(liItem);

var href = document.createElement('a');
href.setAttribute('href', '/sytematic_inventory/views/administrador/index.jsp');

liItem.appendChild(href);

href.appendChild(document.createTextNode('Inicio'));
// Ditto for the other liItem
document.getElementById('menu').appendChild(ulMenu);

Then put this into an external file. i.e.

<script type="text/javascript" src="menu.js"></script>

Put your javascript in an external file and then in your html pages you can link to the file:

<head>    
<script src="mymenu.js" type="text/javascript"></script>
</head>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How to create a menu with DOM and Javascript? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)