gpt4 book ai didi

javascript - 如何将js脚本与html代码隔离?

转载 作者:行者123 更新时间:2023-12-02 23:36:10 25 4
gpt4 key购买 nike

我想将 javascript 代码与 html 代码隔离在两个不同的文件中,最初我有以下代码:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="body">HTML Text</p>
</body>
</html>
<script>
$(document).ready(function () {
$("#body").text("JS Text");
});
</script>

<-p-> 的输出是预期的“JS Text”。

然后我尝试将 js 脚本隔离到另一个文件(script.js):

window.onload = function(){
var text = document.getElementById('body');
text.innerHTML ='JS Text';
}

我还在 html 文件中进行了引用:

<script type="text/javascript"src="scripts.js"></script>

但是输出文本不再是预期的(JS 文本)而是(HTML 文本)

我还需要什么才能使 js 脚本再次工作?

最佳答案

首先,在结束 HTML 标记之后放置任何内容都是无效的,因此虽然您的第一段代码有效,但它是无效的。

如果您删除 JavaScript 并将其放置在自己的文件中,只要您正确引用该文件(使用相对引用并在 Web 服务器上测试该文件)并放置 脚本,它就会继续工作 元素位于结束 body 标记之前,这样当处理脚本并尝试查找正确的 DOM 元素时,DOM 将在那时被加载。

仅供引用:

  • 如果引用的 script 文件中有 JQuery,那么您的引用 JQuery 的 script 需要先出现在 HTML 中到使用它的脚本
  • script 标记中不需要 type 属性几年了。
  • 将任何内容命名为 body 都不是一个好主意,这样就不会导致与 body 元素混淆。
  • 当您使用的字符串不支持时,请勿使用 .innerHTML包含任何 HTML。 .innerHTML 具有安全性和性能影响。请改用 .textContent

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="body">HTML Text</p>
<script src="relativePathToFile.js"></script>
</body>
</html>

关于javascript - 如何将js脚本与html代码隔离?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56283592/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com