使用 JavaScript 添加列表

在 Web 开发中，我们经常需要使用列表来展示一些数据或内容。而 JavaScript 提供了一些方法来添加列表。

使用 createElement() 和 appendChild()

我们可以使用 createElement() 方法创建列表元素，再使用 appendChild() 方法将它添加到父元素中。

// 获取父元素
const parent = document.querySelector('#list');

// 创建列表元素
const listItem = document.createElement('li');
listItem.textContent = '列表项';

// 添加到父元素中
parent.appendChild(listItem);

这样就可以创建一个有一项内容的列表，如果我们要添加多个列表项，可以使用循环来创建并添加。

使用 innerHTML

除了使用 createElement() 和 appendChild() 方法，我们还可以使用 innerHTML 属性来创建和添加列表。

// 获取父元素
const parent = document.querySelector('#list');

// 添加多个列表项
parent.innerHTML = '<li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>';

这样就可以创建一个有三项内容的列表。但需要注意的是，使用 innerHTML 属性会覆盖原来的内容，如果列表中已经有一些内容，就会被删除。

使用模板字符串

还有一种更简洁的方式是使用模板字符串，这样可以写出更简短、可读性更好的代码。

// 获取父元素
const parent = document.querySelector('#list');

// 添加多个列表项
const listItems = ['列表项 1', '列表项 2', '列表项 3'];
parent.innerHTML = listItems.map(item => `<li>${item}</li>`).join('');

这种方式使用了数组的 map() 方法和数组的 join() 方法，将每个列表项转换成一个字符串，再将它们拼接起来。