01.js简介

JavaScript实战：动态HTML修改与事件响应

最新推荐文章于 2025-04-27 15:06:53 发布

原创最新推荐文章于 2025-04-27 15:06:53 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在HTML中直接使用JavaScript，包括利用document.write插入元素，通过事件监听器实现点击事件触发警报，以及通过函数改变HTML内容。

js介绍

1.直接写入HTML中
2.对事件做出反应
3.改变HTML的内容

1.直接写入HTML中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>JavaScript能够直接在HTML中输出</p>
<script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落</p>");
</script>
</body>
</html>

注意： document.write只能在HTML页面中使用。

2.对事件做出反应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
js对点击事件做出反应 <br>
<button onclick="alert('欢迎')">点我</button>
</body>
</html>

注意：alert()一般用于测试。

3.改变HTML的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="demo">改变html内容</p>
<button onclick="f()">点我</button>
<script>
    function f() {
        document.getElementById("demo").innerHTML="我变了，惊不惊喜！";
    }
</script>
</body>
</html>