📅  最后修改于: 2023-12-03 14:43:31.719000             🧑  作者: Mango
在编写 JavaScript 程序时,有时需要使用循环生成一个 UL 列表。下面介绍两种常见的方法。
使用 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 中。
使用 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 列表的两种常见方法。大家可以根据自己的需要来选择适合自己的方法。