怎么修改html网页内容

作者：刃起风啸凌发布日期:2025-07-24 浏览:27

<!-- 示例代码：修改HTML网页内容 -->

<!DOCTYPE html>
<html>
<head>
    <title>修改HTML网页内容示例</title>
    <script>
        // 使用JavaScript修改HTML元素的内容
        function changeContent() {
            // 获取id为"content"的元素
            var element = document.getElementById("content");
            // 修改该元素的innerHTML属性，改变显示的文字
            element.innerHTML = "新的内容已经更新！";
        }
    </script>
</head>
<body>

    <h1 id="content">原始内容</h1>
    <!-- 点击按钮触发changeContent函数，修改网页内容 -->
    <button onclick="changeContent()">点击修改内容</button>

</body>
</html>

解释说明：

HTML结构：页面包含一个标题 (<h1>) 和一个按钮 (<button>)。
JavaScript代码：定义了一个名为 changeContent 的函数，该函数通过 document.getElementById 获取具有特定ID的HTML元素，并通过修改其 innerHTML 属性来更改显示的内容。
交互：当用户点击按钮时，会触发 changeContent 函数，从而将 <h1> 标签中的文本从“原始内容”更改为“新的内容已经更新！”。

希望这个例子能帮助你理解如何使用JavaScript修改HTML网页内容。

上一篇：html测试

下一篇：html 播放视频