如何通过DOM的ul、li展示数组元素？附代码问题求助

我来帮你拆解代码里的问题，一步步修复来实现你的练习需求：

你的代码存在的几个关键问题 #

• 错误处理forEach的返回值：forEach方法本身没有返回值（默认返回undefined），所以你把它赋值给renderArray后，这个变量完全无效，没法用来生成列表项。
• 没有选中HTML中已有的<ul>：练习要求你使用HTML里预先添加的<ul>，但你在JS里重新创建了一个新的<ul>，偏离了需求。
• 只创建了一个<li>元素：你需要遍历数组的每一个菜品，为每个菜品单独创建<li>，而不是只生成一个就结束。
• 语法错误：注释掉的ulTag.document.appendChild(liTag)是错误写法，document是全局顶级对象，不能通过DOM元素调用。

修正后的代码实现 #

HTML部分（给ul添加id方便精准选中） #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Favorite dishes</title>
</head>
<body>
  <div class="list">
    <!-- 添加id，让JS能精准找到这个ul -->
    <ul id="favorite-dishes-list"></ul>
  </div>
  <script type="text/javascript" src="favorite-dishes.js"></script>
</body>
</html>

JavaScript部分 #

// 1. 定义喜爱的菜品数组
const myDishes = ["lasagna", "steak", "pizza", "pasta", "bbq"];

function myFavDishes() {
  // 2. 选中HTML中已有的ul元素
  const ulTag = document.getElementById('favorite-dishes-list');
  
  // 3. 遍历数组，为每个菜品创建独立的li并追加到ul中
  myDishes.forEach(dish => {
    const liTag = document.createElement('li');
    // 用textContent设置纯文本内容，比innerHTML更安全
    liTag.textContent = dish;
    ulTag.appendChild(liTag);
  });
}

// 调用函数渲染列表
myFavDishes();

关键改进点说明 #

• 精准选中已有ul：用document.getElementById获取HTML里预先定义的<ul>，完全符合练习要求。
• 正确遍历生成列表项：在forEach循环内部为每个菜品单独创建<li>，确保每个菜品都有对应的列表项。
• 安全设置文本内容：使用textContent替代innerHTML，当只需要设置纯文本时，能避免潜在的XSS安全风险。
• 移除无效变量：直接在遍历过程中处理每个菜品，不需要额外的无效返回值变量。

内容的提问来源于stack exchange，提问作者yfuku