js中append的用法

在JavaScript中，append()方法可以用于向指定元素的末尾添加一个或多个子元素。本攻略将详细讲解append()方法的使用方法，并提供两个示例说明。

append()方法的使用方法

append()方法可以向指定元素的末尾添加一个或多个子元素。以下是append()方法的语法：

parentElement.append(childElement1, childElement2, ..., childElementN);

其中，parentElement表示要添加子元素的父元素，childElement1到childElementN表示要添加的子元素。以下是一个示例：

<div id="parent"></div>

const parent = document.querySelector('#parent');
const child = document.createElement('div');
child.textContent = 'Hello, world!';
parent.append(child);

以上代码将在#parent元素的末尾添加一个新的<div>子元素，并将其内容设置为Hello, world!。

示例说明

以下是两个示例说明：

示例1：使用append()向列表中添加新项

假设需要向一个列表中添加新项。以下是使用append()的步骤：

1. 定义HTML代码

```html

```

1. 定义JavaScript代码

javascript
const list = document.querySelector('#list');
const newItem = document.createElement('li');
newItem.textContent = 'New item';
list.append(newItem);

以上代码将在#list元素的末尾添加一个新的<li>子元素，并将其内容设置为New item。

示例2：使用append()向表格中添加新行

假设需要向一个表格中添加新行。以下是使用append()的步骤：

1. 定义HTML代码

```html

Name	Age
John	30
Jane	25

```

1. 定义JavaScript代码

javascript
const table = document.querySelector('#table');
const newRow = document.createElement('tr');
const nameCell = document.createElement('td');
const ageCell = document.createElement('td');
nameCell.textContent = 'Bob';
ageCell.textContent = '35';
newRow.append(nameCell, ageCell);
table.querySelector('tbody').append(newRow);

以上代码将在表格的末尾添加一个新的行，并将其内容设置为Bob和35。

通过以上示例说明，我们可以看到append()方法是一种非常实用的DOM操作方法，可以帮助我们方便地向指定元素中添加子元素。

阅读剩余 46%