在 HTML 文档对象模型（DOM）中，修改 HTML 内容是指通过 JavaScript 动态地更改网页中元素的内容。

最常用的方法是使用 innerHTML 属性。

使用 innerHTML 修改元素内容：

innerHTML 属性允许您获取或设置元素的 HTML 内容。

示例：

<p id="example">原始内容</p>

<script>
  // 获取元素并修改其内容
  document.getElementById("example").innerHTML = "新的内容";
</script>

在上述示例中，getElementById("example") 获取具有 id 为 “example” 的 <p> 元素，然后通过设置其 innerHTML 属性，将其内容更改为 “新的内容”。

注意事项：

  • 使用 innerHTML 时，会将元素的现有内容替换为新的 HTML 字符串。
  • 如果需要修改元素的纯文本内容，建议使用 textContent 属性，以避免潜在的安全风险。

使用 textContent 修改元素文本：

textContent 属性用于获取或设置元素的文本内容。

示例：

<p id="example">原始文本</p>

<script>
  // 获取元素并修改其文本内容
  document.getElementById("example").textContent = "新的文本";
</script>

在上述示例中，getElementById("example") 获取具有 id 为 “example” 的 <p> 元素，然后通过设置其 textContent 属性，将其文本内容更改为 “新的文本”。

通过这些方法，您可以动态地修改网页中的元素内容，实现丰富的交互效果和动态更新。

更多详细信息和示例代码，请参考 菜鸟教程。