Question

这是一个简单的网页分配。我有一些页面，我想在侧边栏中显示相同的链接列表，因此制作了以下javascript：

document.getElementByid('list').innerHTML = '<a href=\"index.html\">Main Page</a>'+
'<a href=\"benefits.html\">Benefits</a>'+
'<a href=\"facts.html\">Shocking Statistics</a>'+
'<a href=\"links.html\">Resources</a>';

然后我使用以下内容将其添加到页面顶部：

<head>
<script type="text/javascript" src="./script/links.js"></script>
</head>
...
<div id="list">
</div>

但问题是链接没有出现，我担心我可能不得不回去使用太多document.write行。

Answer 1

我一直这样做......

getElementByid

应该是

getElementById

编辑：我的错误是将d ... getElementByID。

大写

Answer 2

脚本在加载时运行。由于您的脚本出现在您尝试编辑的div元素之前（并且由于您没有做任何事情来延迟它的执行），因此document.getElementById将返回null并且脚本将出错。

将脚本移至</body>之前。

此外，该方法为getElementById而不是getElementByid。

那说，根据JavaScript添加基本导航是一个糟糕的主意。使用pre-processor or server side solution可能会更好。

Answer 3

问题是您正在尝试通过尚不存在的ID访问元素。您的脚本将在其包含的位置执行。您需要等到文档被解析并且DOM树已经准备好。您可以通过使用窗口load事件来实现，或者如果您使用任何类型的JavaScript工具包（如Prototype或jQuery），它们通常会提供更早发生的事情（因为window.load仅在所有图像之后发生已加载）。

编辑：当然，正如其他人所说，你有一个错字，它是getElementById。

Answer 4

您将遇到innerHTML方法的问题，因为您尝试检索的文档<div>元素可能尚未出现在文档中。如果你走这条路线，你需要在文件加载后调用innerHTML内容。

这里document.write没有错。如果你真的必须使用JavaScript动态编写内容，使用document.write将避免搞乱加载事件处理程序，并且会使你的内容立即出现，而不是在文档加载后明显更改文档。

Answer 5

您需要在加载正文后调用javascript，以便初始化您引用的元素。为此，您应该将代码放在一个函数中。 e.g。

function buildNav（）{ ... }

然后在你的身体标签上，使用onload事件：

<body onload="buildNav()">

这样，javascript就会在主体完成加载后才会运行。

Answer 6

除了“id”大小写和加载顺序之外：制作必要的网页内容（例如依赖于JavaScript的导航链接）通常是一个非常糟糕的主意。

这会给您提供辅助功能问题，这意味着搜索引擎会忽略您的所有链接。只是为了保存复制和粘贴一些＆lt; a＆gt;而不是一个非常好的讨价还价标签

要复制常见页面元素，请查看基于服务器的页面处理技术，其中最简单的是SSI。

innerHTML不写入文档

6 个答案: