📜  js 循环 ul - Javascript (1)

📅  最后修改于: 2023-12-03 14:43:31.719000             🧑  作者: Mango

使用 JavaScript 循环生成 UL

在编写 JavaScript 程序时,有时需要使用循环生成一个 UL 列表。下面介绍两种常见的方法。

1. 使用 for 循环

使用 for 循环是最常见的方法之一。代码如下:

// 在 JavaScript 中获取 UL 元素
var ul = document.getElementById('myList');

// 创建 LI 元素并添加到 UL 中
for (var i = 1; i <= 5; i++) {
  var li = document.createElement('li');
  li.appendChild(document.createTextNode('Item ' + i));
  ul.appendChild(li);
}

其中,document.getElementById('myList') 用于获取 ID 为 myList 的 UL 元素,document.createElement('li') 用于创建 LI 元素,li.appendChild(document.createTextNode('Item ' + i)) 用于创建文本内容并将其添加到 LI 元素中,ul.appendChild(li) 用于将 LI 元素添加到 UL 中。

2. 使用 forEach 方法

使用 forEach 方法也是一种常见的方法。代码如下:

// 在 JavaScript 中获取 UL 元素
var ul = document.getElementById('myList');

// 创建 LI 元素并添加到 UL 中
['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].forEach(function(item) {
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(item));
  ul.appendChild(li);
});

其中,document.getElementById('myList') 用于获取 ID 为 myList 的 UL 元素,['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'] 是一个包含了 5 个字符串元素的数组,.forEach(function(item) {}) 用于循环遍历这个数组,并对其中的每个元素执行回调函数。

以上就是使用 JavaScript 循环生成 UL 列表的两种常见方法。大家可以根据自己的需要来选择适合自己的方法。