基于传递的数组创建和填充 <ul> 列表

在前端开发中，我们经常需要将一个数组转换成 HTML 格式的列表。本文将介绍如何通过 JavaScript 和 HTML 中的 <ul> 元素来实现这一任务。

HTML 元素 <ul>

<ul> 是 HTML 中用来表示无序列表的元素，意思是 unordered list。它可以包含多个子元素，每个子元素由 <li> 元素表示，意思是 list item。下面是一个例子：

<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>

以上代码会生成如下的列表：

• Item One
• Item Two
• Item Three

创建并填充

要动态地创建并填充 <ul> 列表，我们需要使用 JavaScript 来操作 DOM。

首先，我们需要获取到要插入列表项的父元素，即 <ul> 元素。可以通过 document.querySelector() 方法或者 document.getElementById() 方法来获取它。

const ul = document.querySelector('ul');

接下来，我们需要遍历传递进来的数组，并为每个数组元素创建一个 <li> 元素。可以使用 Array.prototype.forEach() 方法或者 for...of 循环来实现。对于每个数组元素，我们都需要创建一个新的 <li> 元素，并将其添加到 <ul> 元素中。

const items = ['Item One', 'Item Two', 'Item Three'];

items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li);
});

以上代码会将数组 items 中的元素逐个添加到 <ul> 元素中。最终生成的列表如下：

• Item One
• Item Two
• Item Three

示例代码

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  --------------- - ------------
-------
------
  ------------ - ---------

  ---------

  --------
    ----- -- - -----------------------------
    ----- ----- - ------ ----- ----- ----- ----- --------

    ------------------ -- -
      ----- -- - -----------------------------
      -------------- - -----
      -------------------
    ---
  ---------
-------
-------

总结

本文介绍了如何通过 JavaScript 和 HTML 中的 <ul> 元素来创建和填充列表项。我们遍历传递进来的数组，并为每个数组元素创建一个新的 <li> 元素，然后将其添加到 <ul> 元素中。这是一个非常基础的任务，但也是前端开发中必不可少的一部分。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29149