js中怎么根据list动态增加html中显示的内容并写个复杂示例
时间: 2024-02-09 17:12:47 浏览: 21
在 JS 中,我们可以通过 DOM 操作来实现根据 list 动态增加 HTML 内容的功能。具体来说,可以使用 `createElement` 方法来创建新的 HTML 元素,然后使用 `appendChild` 方法将其添加到已有的 HTML 元素中。
以下是一个复杂示例,我们将使用 JS 动态创建一个包含多个列表项的无序列表,并将其添加到 HTML 页面中:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>动态增加 HTML 内容</title>
</head>
<body>
<button id="addListItem">添加列表项</button>
<ul id="listContainer"></ul>
</body>
</html>
```
JS 代码:
```js
// 获取按钮和列表容器元素
const addListItemBtn = document.getElementById('addListItem');
const listContainer = document.getElementById('listContainer');
// 定义列表项的初始数量
let listItemCount = 0;
// 绑定按钮点击事件
addListItemBtn.addEventListener('click', () => {
// 创建新的列表项元素
const listItem = document.createElement('li');
listItemCount++;
listItem.textContent = `列表项 ${listItemCount}`;
// 在列表容器中添加新的列表项
listContainer.appendChild(listItem);
// 创建新的子列表,并将其添加到新的列表项中
if (listItemCount % 2 === 0) {
const subList = document.createElement('ul');
listItem.appendChild(subList);
for (let i = 1; i <= 3; i++) {
const subListItem = document.createElement('li');
subListItem.textContent = `子列表项 ${i}`;
subList.appendChild(subListItem);
}
}
});
```
上述代码中,我们首先获取了 HTML 页面中的按钮和列表容器元素,并定义了列表项的初始数量为 0。然后,我们绑定了按钮的点击事件,在事件处理函数中创建了一个新的列表项元素,并将其添加到列表容器中。同时,如果列表项数量是偶数,我们还创建了一个新的子列表,并将其添加到新的列表项中,并在子列表中添加了三个子列表项。这样,每当点击按钮时,页面中就会动态增加一个新的列表项,同时每两个列表项就会包含一个子列表。