Question

我只是在学习Javascript，需要回答这个问题。为什么这段javascript不能使用内部脚本标记在HTML DOM中工作？

这是我的HTML文档。使用内部JavaScript扩展程序：

<div id="targetarea">
    <p>Hello World</p>
</div>
<div id="target-area">
    <p id="tagline">Hello World!</p>
</div>
<script>
//Creating a a new element
// store the target area to a variable to keep things neat
var targetArea = document.getElementById("target-area");
// create our <p> element
var p = document.createElement("p");
// create a text node inside the <p>, note that we're 
//  using a variable "p" here
var snippet = document.createTextNode("this was a generated paragraph");
// insert our generated paragraph into the DOM
p.appendChild(snippet);
targetArea.appendChild(p);
</script>

这在内部工作正常但是当使用外部js文件时却没有。有人可以给我正确的js片段，以便在外部文件中工作并解释原因吗？

Answer 1

这取决于您运行脚本的时间。

如果您在文件的<head>部分加载脚本，那么页面的DOM尚未加载，因此例如getElementById将失败。

加载外部脚本作为<body>部分中的最后一件事将解决此问题。

Answer 2

如果代码在内部运行良好但不在外部运行，则问题可能是链接JS文件。检查您的JS文件的链接，并确保它已正确链接。如果你像这样链接javascript文件

<script src="javascriptFile.js">
</script>

并且代码仍然无法正常运行，那么问题可能在其他地方。还要确保在主体内部加载脚本，并确保文件路径正确。

你会惊讶于像拼写错误这样的小错误会导致像这样的问题。

为什么这可以作为内部脚本使用，但在使用外部javascript文件时则不行

2 个答案: