html中append

在HTML和JavaScript领域，`append()` 方法是一种常用的操作，用于在元素的子节点列表的末尾添加一个或多个节点。这使得web开发者能够创建动态的、可操控的页面，并实时改变页面的内容和结构。在本文中，我们将详细介绍 `append()` 方法的原理，以及如何在实际项目中应用它。

**原理**

`append()` 方法是在Web API中的文档对象模型（DOM）之一，它作为一个对象提供了操控HTML文档结构的方法和属性。在HTML文档中，所有的元素都可以使用 `append()` 方法，这意味着您可以在任何元素内向其子节点列表添加新的内容。

当调用 `append()` 方法时，浏览器将执行以下操作：

1. 如果传递的参数是一个字符数据（即文本内容），它将创建一个新的文本节点并附加到目标元素的子节点列表中。

2. 如果传递的参数是一个已存在于文档内的元素节点，它将从其当前位置移动到新的位置。

3. 如果传递的参数是一个新创建的元素节点，它将添加到目标元素的子节点列表中。

**使用方法**

`append()` 方法可以接受多个参数，并将它们按顺序附加到目标元素的子节点列表中。以下是一些示例代码，展示了如何使用 `append()` 方法：

1. 向 div 元素附加文本内容:

```javascript

// 获取元素并存储为变量

const myDiv = document.getElementById("myDiv");

// 使用 append() 方法向 div 添加文本内容

myDiv.append("这是一段新的文本");

```

2. 在一个列表中添加新的列表项：

```html

• 项目1
• 项目2

```

3. 移动已经存在于文档的节点：

```html

这是一个段落。