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