在 web 开发中，经常需要通过 JavaScript 来修改 HTML 内容，以实现动态更新页面的效果。HTML DOM（文档对象模型）提供了一系列方法来操作 HTML 元素，从而实现对页面内容的修改。
innerHTML 属性
innerHTML 属性是 HTML DOM 中常用的属性之一，它可以用来获取或设置 HTML 元素的内容。通过修改 innerHTML 属性，我们可以动态改变元素的内容。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -- ---------------- ---------- -------- ----------------------------------------- - ------- ------ --------- ------- -------
在上面的示例中，我们通过 document.getElementById() 方法获取 id 为 "demo" 的元素，并将其 innerHTML 属性设置为 "Hello, DOM!"，从而实现了修改 HTML 内容的效果。
createElement() 方法
除了修改已有的 HTML 内容，我们还可以通过 createElement() 方法创建新的 HTML 元素，并将其添加到页面中。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---- --------------------- -------- --- ---------- - ---------------------------- --- -------- - ----------------------------- -- - --- ------------- --------------------------------- ------------------------------------------------------------- --------- ------- -------
在上面的示例中，我们通过 createElement() 方法创建了一个新的 p 元素，并通过 createTextNode() 方法创建了一个文本节点，然后将文本节点添加到新创建的 p 元素中，并最终将该 p 元素添加到 id 为 "container" 的 div 元素中。
通过以上两种方法，我们可以灵活地修改 HTML 内容，实现页面内容的动态更新。