Javascript innerHTML正在缓慢加载

我想避免每次我想改变的时候都要把菜单放在5个不同的页面上。因此，我使用Javascript在运行时重新创建菜单，这样我就可以更改该脚本，使菜单一次在所有页面上更改（我知道，genius，对吧？）

但事情是这样的；当代码按预期工作时，菜单似乎是第一次加载，当页面的其余部分加载时，即使我使用

window.onload调用函数。我真的不知道为什么。我的猜测是innerHTML很慢，或者我在错误的时间加载了脚本

我尝试在
加载它，但考虑到DOM还不存在，这没有多大意义。所以我把它移到了header标签上，这是菜单代码最初的位置，这样它就可以在header出现时加载。但这是完全相同的行为

如果我输入菜单直接用HTML编写的任何其他页面，它会像页面的其余部分一样立即加载。有什么建议吗

window.onload = function () {
    var header = document.getElementById("header");
    var div = document.createElement('div');
    div.className = 'inner';

    div.innerHTML =
        '<h1><a href="-omitted-" id="logo">Dynamic Realities</a></h1>' +
        '<nav id="nav"><ul>' +
        '<li><a href="-omitted-">Home</a></li>' +
        '<li><a href="-omitted-" target="_blank">Forum</a></li><li>' +
        '<a href="-omitted-">Media</a></li>' +
        '<li><a href="-omitted-">The Team</a></li>' +
        '<li><a href="-omitted-">Open Positions</a></li></ul></nav>';
    header.appendChild(div);
}

window.onload=函数（）{
var header=document.getElementById（“header”）；
var div=document.createElement（'div'）；
div.className='内部'；
div.innerHTML=
'' +
“
”+
“
”+
“
”+
“
”+
“
”+
“
”；
标题。追加子项（div）；
}
对<代码>窗口。加载完DOM的其余部分后，将触发onload

---

如果您将它放在DOM中它所属的头文件中，您可以删除

onload

事件，然后直接在那里执行。这应该会使它工作得更好。

啊，是的，这就成功了。这种做法是否可行？我是JavaScript新手，所以我不知道。使用服务器端包含可能会更好，但作为替代，这很好。