JS遍历二维数组生成h3插入对应容器时全部内容插入所有容器如何解决

问题根因 #

你的代码逻辑存在两层嵌套遍历的错误：

• 外层遍历所有.list-container容器时，内层又遍历了整个arrList数组，导致每个容器都会插入所有子数组的内容，无法实现「子数组和容器一一对应」的需求
• 内层遍历没有对每个子数组的内部元素做二次遍历，直接把整个子数组作为内容塞到了h3标签中，不符合渲染要求

修正代码 #

无需修改原有CSS和HTML结构，仅调整JS逻辑即可，调整后代码如下：

const arrList = [
  ["Frontend", "Senior", "HTML", "CSS", "JavaScript"],
  ["Fullstack", "Midweight", "Python", "React"]
];
const listContainer = document.querySelectorAll('.list-container');
// 利用容器遍历的索引，取arrList中对应位置的子数组
listContainer.forEach((container, index) => {
  // 下标越界判断，避免子数组数量少于容器数量时报错
  if (!arrList[index]) return
  // 遍历当前子数组的每一项创建h3插入
  arrList[index].forEach(item => {
    const h3 = document.createElement('h3');
    h3.textContent = item;
    container.append(h3);
  })
});

注意事项 #

• 要保证.list-container的数量和arrList的子数组数量一致，避免出现内容遗漏
• 渲染纯文本内容优先使用textContent而非innerHTML，可规避XSS注入风险

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