Javascript 无法将js导入html_Javascript_Jquery_Html

Javascript 无法将js导入html

javascript jquery html

Javascript 无法将js导入html,javascript,jquery,html,Javascript,Jquery,Html,我只是想了解JS和HTML的基本知识。基本上我想执行一个超级简单的js。这是我的test.js文件： document.getElementById("test").innerHTML = "Loaded js file"; 下面是我的test.html： <!DOCTYPE HTML> <html lang="de"> <head> <title>Testing page</title> <meta charset="ut

我只是想了解JS和HTML的基本知识。基本上我想执行一个超级简单的js。这是我的test.js文件：

document.getElementById("test").innerHTML = "Loaded js file";

下面是我的test.html：

<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Testing page</title>

<meta charset="utf-8">
<script type="text/javascript" src="test.js"></script>
</head>
<body>

    <p id="test">Not loaded</p>

</body>
</html>

两个文件位于同一文件夹中。应该发生的是，未加载的文本会被加载的js文件替换，但它不会发生。我做错了什么？

这是因为JavaScript在元素加载之前加载。你有两种方法

捷径

将JavaScript移动到元素之后

<!DOCTYPE HTML>
<html lang="de">
  <head>
    <title>Testing page</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p id="test">Not loaded</p>
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>

因为您使用的是jQuery，所以可以用一种简单的方式保存它：

$(function () {
  $("#test").html("Loaded js file");
});

注意：与上述方法相比，我更喜欢此方法，因为此函数仅在文档完全加载时才执行，而且也不引人注目。

这是因为您必须等待窗口加载完毕

window.onload = function() {
    document.getElementById("test").innerHTML = "Loaded js file";
};

在DOM准备就绪之前加载脚本，当您设置innerHTML时，DOM对象测试还不存在

解决方案-在函数中包装js内容：

DOM的元素按顺序进行解析。脚本也是一个元素。在您的例子中，脚本已经被解析，但是p元素还没有被解析，因为脚本的执行会停止所有HTML解析，直到它到达文件的末尾。因此，为了查询DOM，应该替换文件底部的脚本

<!DOCTYPE HTML>
<html lang="de">
<head>
   <title>Testing page</title>
   <meta charset="utf-8">
</head>
<body>
   <p id="test">Not loaded</p>
   <script type="text/javascript" src="test.js"></script>
</body>
</html>

在DOM完成加载之前，您的脚本正在运行，因此测试元素还不存在。@原始问题用jquery标记，您在放置该注释后将其删除；虽然这个问题在示例中没有直接使用jquery，但这并不意味着OP没有寻找它。。特别是当他们自己在问题上加上标签时。更多的是解释为什么会很好。onload事件可能不会很好地工作。当DOM的结构已被解析，但所有资源（如图像、css、javascript文件）也已加载时，浏览器触发此事件。如果您在网络连接不良的情况下等待浏览器下载一些巨大的内容，您可能会一直处于权重状态。@Sagi然后我们将更多地了解jQuery，它也使用此事件，但也有一个回退机制来支持使用此技巧的旧浏览器：

window.onload = function() {
    document.getElementById("test").innerHTML = "Loaded js file";
};

<!DOCTYPE HTML>
<html lang="de">
<head>
   <title>Testing page</title>
   <meta charset="utf-8">
</head>
<body>
   <p id="test">Not loaded</p>
   <script type="text/javascript" src="test.js"></script>
</body>
</html>

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("test").innerHTML = "Loaded js file";
}, false);