如何用纯JavaScript结合CSS Grid实现JSON数据转Div网格？

原代码的核心问题 #

1. 语法错误：函数声明格式错误，正确箭头函数写法应为const createGrid = (data) => {
2. 元素添加无效：sidebarContent.typeCell;这类写法完全不具备添加元素的作用，必须使用append()或appendChild()方法将元素挂载到容器中
3. 元素创建逻辑错误：创建span时不能直接把赋值结果传给append，需先创建元素、设置内容，再执行添加操作
4. 缺少Grid布局配置：未给容器添加CSS Grid属性，无法形成预期的网格结构

完整实现代码 #

1. CSS Grid布局配置

给网格容器设置列规则，匹配示例中的5列结构：

.sidebar-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5个等宽列 */
  gap: 8px; /* 单元格间距 */
  padding: 16px;
}

/* 可选：添加单元格样式，模拟表格视觉效果 */
.sidebar-content > div {
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

2. 修正后的JavaScript函数

const createGrid = (data) => {
  const sidebarContent = document.querySelector('.sidebar-content');
  // 渲染前清空容器，避免重复加载内容
  sidebarContent.innerHTML = '';

  data.forEach(item => {
    // 零件号单元格
    const partNumberCell = document.createElement('div');
    partNumberCell.textContent = item.orderInfo.partNumber;
    sidebarContent.append(partNumberCell);

    // 类型单元格
    const typeCell = document.createElement('div');
    typeCell.textContent = item.orderInfo.type;
    sidebarContent.append(typeCell);

    // 时间单元格（示例用test，可替换为实际字段）
    const timeCell = document.createElement('div');
    timeCell.textContent = 'test';
    sidebarContent.append(timeCell);

    // 延迟时间单元格
    const neededCell = document.createElement('div');
    const delaySpan = document.createElement('span');
    delaySpan.textContent = item.delayInfo.delayInSeconds;
    neededCell.append(delaySpan);
    sidebarContent.append(neededCell);

    // 状态单元格
    const statusCell = document.createElement('div');
    const statusSpan = document.createElement('span');
    statusSpan.textContent = item.statusInfo.status;
    statusCell.append(statusSpan);
    sidebarContent.append(statusCell);
  });
};

关键说明 #

• 用textContent替代innerHTML：纯文本场景下更安全，避免XSS风险
• 容器清空处理：每次渲染前清空容器，防止重复添加数据
• Grid列配置：repeat(5,1fr)确保生成5个宽度均等的列，匹配每个数据项的5个单元格
• 可选样式：添加边框、内边距可让网格更接近表格的视觉呈现

内容的提问来源于stack exchange，提问作者N.SH