使用JavaScript更新DOM结构

# 简介

## 1.1 什么是DOM结构？

DOM（文档对象模型）是用于表示网页文档的树状结构。在DOM中，每个HTML标签、文本和属性都被表示为对象。DOM结构提供了一种可以通过脚本语言（如JavaScript）来操作页面内容和结构的方式。

## 1.2 JavaScript对DOM结构的操作

JavaScript是一种强大的脚本语言，它可以通过操作DOM结构来实现对网页内容的修改、创建、移除以及样式的更新等功能。通过JavaScript对DOM进行操作，我们可以实现页面内容的动态更新和交互效果。

### 2. 修改元素内容

在前面的章节中，我们已经介绍了如何使用JavaScript来访问DOM结构。接下来，让我们看看如何使用JavaScript来修改DOM元素的内容。

#### 2.1 使用innerHTML属性

innerHTML属性可以用来获取或设置元素的HTML内容。通过修改innerHTML属性，我们可以动态改变元素的显示内容。下面是一个简单的例子，演示了如何使用innerHTML属性来修改元素的内容：

// 选取要修改内容的元素
var element = document.getElementById('example');

// 修改元素的HTML内容
element.innerHTML = '这是新的内容';

上述代码中，我们首先通过getElementById方法选取了具有 id="example" 的元素，然后使用innerHTML属性将其内容修改为新的内容。

#### 2.2 使用textContent属性

除了innerHTML，我们还可以使用textContent属性来修改元素的文本内容。与innerHTML不同，textContent会将内容作为纯文本处理，不会解析任何HTML。下面是一个简单的例子：

// 选取要修改内容的元素
var element = document.getElementById('example');

// 修改元素的文本内容
element.textContent = '这是新的文本内容';

### 3. 创建新元素

在JavaScript中，我们可以使用createElement方法来创建新的HTML元素。这个方法接受一个参数，即要创建的元素的标签名，例如`<div>`、`<p>`、`<span>`等。下面我们来看一个例子：

// 创建一个新的<div>元素
var newDiv = document.createElement('div');

创建好元素后，接下来可以对新元素进行操作，比如设置元素的属性、添加内容等。例如，我们可以给新创建的 `<div>` 元素设置文本内容：

// 给新创建的<div>元素添加文本内容
newDiv.textContent = '这是新创建的div元素';

创建并设置好新的元素后，我们需要将其添加到DOM中。这里我们可以使用appendChild方法来将新创建的元素添加到