在前端开发中，我们经常需要将一个数组转换成 HTML 格式的列表。本文将介绍如何通过 JavaScript 和 HTML 中的 <ul> 元素来实现这一任务。
HTML 元素 <ul>
<ul> 是 HTML 中用来表示无序列表的元素，意思是 unordered list。它可以包含多个子元素，每个子元素由 <li> 元素表示，意思是 list item。下面是一个例子：
---- -------- -------- -------- -------- -------- ---------- -----
以上代码会生成如下的列表：
- Item One
- Item Two
- Item Three
创建并填充
要动态地创建并填充 <ul> 列表，我们需要使用 JavaScript 来操作 DOM。
首先，我们需要获取到要插入列表项的父元素，即 <ul> 元素。可以通过 document.querySelector() 方法或者 document.getElementById() 方法来获取它。
----- -- - -----------------------------
接下来，我们需要遍历传递进来的数组，并为每个数组元素创建一个 <li> 元素。可以使用 Array.prototype.forEach() 方法或者 for...of 循环来实现。对于每个数组元素，我们都需要创建一个新的 <li> 元素，并将其添加到 <ul> 元素中。
----- ----- - ------ ----- ----- ----- ----- -------- ------------------ -- - ----- -- - ----------------------------- -------------- - ----- ------------------- ---
以上代码会将数组 items 中的元素逐个添加到 <ul> 元素中。最终生成的列表如下：
- Item One
- Item Two
- Item Three
示例代码
--------- -----
----- ----------
------
----- ----------------
--------------- - ------------
-------
------
------------ - ---------
---------
--------
----- -- - -----------------------------
----- ----- - ------ ----- ----- ----- ----- --------
------------------ -- -
----- -- - -----------------------------
-------------- - -----
-------------------
---
---------
-------
-------总结
本文介绍了如何通过 JavaScript 和 HTML 中的 <ul> 元素来创建和填充列表项。我们遍历传递进来的数组，并为每个数组元素创建一个新的 <li> 元素，然后将其添加到 <ul> 元素中。这是一个非常基础的任务，但也是前端开发中必不可少的一部分。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29149