HTML DOM - 修改 HTML 内容

在 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 内容，实现页面内容的动态更新。