在HTML中添加JavaScript代码有多种方式，以下是一些常见的方法：
1、内联JavaScript：这是最简单的方式，你可以直接在HTML文件中使用<script>标签来嵌入JavaScript代码，这种方式的优点是简单易用，但是缺点是如果JavaScript代码过多，会导致HTML文件变得庞大且难以维护。
<!DOCTYPE html>
<html>
<body>
<h2>我的第一个 JavaScript 程序</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
点击这里</button>
<p id="demo"></p>
</body>
</html>
2、外部JavaScript：你可以将JavaScript代码写在一个单独的.js文件中，然后在HTML文件中通过<script src="yourfile.js"></script>标签来引用这个文件，这种方式的优点是可以将JavaScript代码和HTML代码分开，使得代码更加清晰和易于维护。
<!DOCTYPE html> <html> <body> <h2>我的第一个 JavaScript 程序</h2> <button type="button" onclick="displayDate()">点击这里</button> <p id="demo"></p> <script src="yourfile.js"></script> </body> </html>
3、事件处理程序：你可以在HTML元素中使用onclick、onmouseover等属性来直接调用JavaScript函数，这种方式的优点是可以在不增加HTML文件大小的情况下添加JavaScript功能。
<!DOCTYPE html>
<html>
<body>
<h2>我的第一个 JavaScript 程序</h2>
<button onclick="displayDate()">点击这里</button>
<p id="demo"></p>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
4、DOM操作：JavaScript可以动态地修改HTML文档的内容、结构和样式，你可以使用document.getElementById("demo")来获取一个元素，然后使用element.innerHTML = "Hello World"来改变这个元素的内容。
<!DOCTYPE html>
<html>
<body>
<h2 id="demo">Hello World</h2>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript"; // 改变内容
document.getElementById("demo").style.color = "red"; // 改变样式
</script>
</body>
</html>
以上就是在HTML中添加JavaScript代码的基本方法，需要注意的是，由于浏览器的安全限制，有些JavaScript功能可能无法在所有浏览器中正常工作，当你编写JavaScript代码时，最好先测试一下你的代码是否能在所有目标浏览器中正常工作。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/334989.html
微信扫一扫 