JavaScript如何根据二维数组创建多个无序列表？代码问题排查

API 探路者

2026-9-1

问题根源

你的代码运行不符合预期，是3个低级错误导致的：

DOM元素只在循环外创建了1次：ul、li、span都写在for循环外面初始化，DOM规则中同一个节点重复调用appendChild插入，只会把节点从原有位置移动到新位置，不会复制生成新节点，所以最终只会剩下1个ul、1个li、1个span。
数组变量名拼写错误：你定义的二维数组名为groups，内层循环取值时错写成了不存在的ArrayClass，所以拿到的值全是undefined。
分组序号逻辑错误：循环变量i从0开始计数，直接拼接字符串会得到Groep0、Groep1、Groep2，和你预期的从1开始的序号不匹配。

修正后可直接运行的代码

// 测试用二维数组
var groups = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 初始化外层容器
const divElementGroups = document.createElement("div");
document.getElementById("teamsList").appendChild(divElementGroups);

// 遍历生成分组
for (let i = 0; i < groups.length; i++) {
  // 每个分组独立创建ul和标题
  const ulListItemGroups = document.createElement("ul");
  const elementTitleGroups = document.createElement("span");
  elementTitleGroups.textContent = `Group ${i + 1}`;
  ulListItemGroups.appendChild(elementTitleGroups);

  // 遍历生成分组内的列表项
  for (let j = 0; j < groups[i].length; j++) {
    const listItemGroups = document.createElement("li");
    listItemGroups.textContent = groups[i][j];
    ulListItemGroups.appendChild(listItemGroups);
  }

  // 组装完成的ul插入外层div
  divElementGroups.appendChild(ulListItemGroups);
}