如何在Append操作中用嵌套循环基于二维数组生成多层DOM结构

以下提供两种常用的实现方式，可根据你的实际场景选择：

方案1：原生DOM操作 #

可读性更高，适合数据量不大的场景：

// 替换为你实际要插入的容器元素
const container = document.getElementById('app');
const data = [
  [
    { title: '1' },
    { title: '2' }
  ],
  [
    { title: '3' },
    { title: '4' }
  ]
];

// 外层循环生成父div
data.forEach((subArr, index) => {
  const parentDiv = document.createElement('div');
  // 按索引设置类名，你也可以自定义类名规则
  parentDiv.className = index === 0 ? 'first-array' : 'second-array';

  // 内层循环生成子元素
  subArr.forEach(item => {
    const span = document.createElement('span');
    const p = document.createElement('p');
    p.textContent = item.title;
    span.appendChild(p);
    parentDiv.appendChild(span);
  });

  container.appendChild(parentDiv);
});

方案2：HTML字符串拼接 #

一次性插入DOM，性能更优，适合数据量较大的场景：

const container = document.getElementById('app');
const data = [
  [
    { title: '1' },
    { title: '2' }
  ],
  [
    { title: '3' },
    { title: '4' }
  ]
];

let html = '';
data.forEach((subArr, index) => {
  html += `<div class="${index === 0 ? 'first-array' : 'second-array'}">`;
  subArr.forEach(item => {
    html += `
      <span>
        <p>${item.title}</p>
      </span>
    `;
  });
  html += '</div>';
});

container.innerHTML = html;

如果外层数组长度不固定，你可以把类名规则修改为通用的动态命名，比如array-${index}，不需要写死判断第一个第二个数组。

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