Question

我试图通过使用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>

我添加了一些document.write("..")来查找js bug的位置，而且似乎是在使用navwar.appendChild(ul);时，我不明白为什么它不起作用！

这个脚本应该创建一个包含4个项目的菜单，在项目中应该有一个包含4个项目的子菜单！

Answer 1

您的脚本在DOM准备好之前正在执行 - 当您尝试附加到它时#primary_nav_wrap不存在。

将<script>标记移到<body>的末尾，它会正常工作：

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

或者在DOMContentLoaded事件处理程序中运行脚本：

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

但是，您无法在此处使用document.write - 一旦页面加载，就会blows away the existing DOM content and starts a new document。而是使用console.log进行调试。

使用javascript填写html导航菜单

1 个答案: