Fatal编程技术网

用javascript填充html导航菜单

javascript html

用javascript填充html导航菜单,javascript,html,Javascript,Html,我试图使用Javascript填充导航菜单，但结果一无所获 <script type="text/javascript"> var main_menu_list = ['home','software','tutorials','about'] var submenu_about = ['credits','domain','gpg','contact'] var index, len, arg, li, link, ul; var n

我试图使用Javascript填充导航菜单，但结果一无所获

<script type="text/javascript">

    var main_menu_list = ['home','software','tutorials','about']
    var submenu_about = ['credits','domain','gpg','contact']    


    var index, len, arg, li, link, ul;

    var navwarp = document.getElementById('primary_nav_wrap');


    document.write("js is being called");

    ul = document.createElement('ul');
    for (index = 0, len = main_menu_list.length; index < len; ++index) {
        arg = main_menu_list[index];
        li = document.createElement('li');
        li.id='li'+arg; 
        link = document.createElement('a');
        link.innerHTML = arg;       
        li.appendChild(link);
        ul.appendChild(li);
    }
    navwarp.appendChild(ul);

    document.write("the first block is working");

    ul = document.createElement('ul');  
    for (index = 0, len = submenu_about.length; index < len; ++index) {
        arg =submenu_about[index];
        li = document.createElement('li');
        li.id='li'+arg;
        link = document.createElement('a');
        link.innerHTML = arg;
        li.appendChild(link)
        ul.appendChild(li);
    }
    document.getElementById('liabout').appendChild(ul);

    document.write("there are no bugs");

</script>

<body>
    <nav id="primary_nav_wrap"></nav>
</body>


var主菜单列表=['home'、'software'、'tutorials'、'about']
var子菜单_about=['credits'、'domain'、'gpg'、'contact']
var指数，len，arg，li，link，ul；
var navwarp=document.getElementById（'primary_nav_wrap'）；
document.write（“正在调用js”）；
ul=document.createElement（'ul'）；
对于（index=0，len=main_menu_list.length；index
我添加了一些
document.write（“…”
）来查找js bug的位置，在使用
navwar.appendChild（ul）时，它似乎在哪里，我不明白为什么它不工作


这个脚本应该创建一个包含4个项目的菜单，在关于的项目中应该有一个包含4个项目的子菜单
 您的脚本在DOM准备就绪之前执行-
#primary_nav_wrap
在尝试附加到它时不存在

将您的
标签移动到
的末尾，它就可以正常工作了：


<body>
    <nav id="primary_nav_wrap"></nav>
    <script> ... </script>
</body>



但是，您不能使用
文档。请在此处写入
——一旦页面加载完毕，它将被删除。使用
console.log
进行调试。
对我来说没问题：不用
document.write（）
你可以使用
console.log（…）
进行调试。jsiddle将你的JavaScript包装在
DOMContentLoaded
处理程序中，因此它在那里工作（当
document.write
调用被删除时）。

<head>
<script>
    document.addEventListener('DOMContentLoaded', function() {
      // your JS
    });
</script>
<body>
    <nav id="primary_nav_wrap"></nav>
</body>