如何使用HTML DOM的innerHTML属性来操作网页内容？

innerHTML属性用于获取或设置一个元素的内容。它返回元素的子节点（包括文本和HTML标签）的序列化表示。

innerHTML属性应用（HTML DOM innerHTML）

innerHTML是HTML DOM中的一个属性，它允许我们获取或设置指定元素的内容，通过使用innerHTML，我们可以动态地修改网页中的元素内容。

如何使用innerHTML属性？

获取元素的innerHTML

要获取元素的内部HTML内容，可以使用以下语法：

var content = document.getElementById("elementId").innerHTML;

elementId是要获取内容的元素的ID。

设置元素的innerHTML

要设置元素的内部HTML内容，可以使用以下语法：

document.getElementById("elementId").innerHTML = "<p>新的内容</p>";

这将替换掉指定元素内的所有内容，并插入新的HTML内容。

示例代码

以下是一个简单的示例，演示如何使用innerHTML来更改页面上的一个段落的文本内容：

<!DOCTYPE html>
<html>
<head>
    <title>innerHTML示例</title>
</head>
<body>
    <p id="demo">这是一个段落。</p>
    <button onclick="changeContent()">点击更改内容</button>
    <script>
        function changeContent() {
            document.getElementById("demo").innerHTML = "内容已更改！";
        }
    </script>
</body>
</html>

当用户点击按钮时，段落的内容将变为"内容已更改！"。