如何通过JS在HTML中按层级渲染嵌套对象数组？

1. 基础HTML容器 #

先准备一个用来承载树结构的容器：

<div id="tree-container"></div>

2. CSS样式（区分层级） #

给节点添加样式，通过缩进直观体现层级关系：

.node {
  border: 1px solid #ccc;
  padding: 8px;
  margin: 4px 0;
  border-radius: 4px;
  background-color: #f9f9f9;
}
.children-container {
  margin-left: 24px; /* 子节点缩进，明确层级 */
}

3. JavaScript递归渲染代码 #

核心用递归遍历嵌套结构，确保每个子节点挂载到对应父节点的DOM元素下：

// 获取主容器
const container = document.getElementById('tree-container');

// 递归渲染单个节点
function renderNode(node, parentEl) {
  // 创建当前节点的DIV元素
  const nodeDiv = document.createElement('div');
  nodeDiv.className = 'node';
  nodeDiv.textContent = `${node.name} (ID: ${node.id})`;
  
  // 把节点添加到父容器
  parentEl.appendChild(nodeDiv);
  
  // 如果有子节点，创建子容器并递归渲染
  if (node.children?.length) {
    const childrenWrap = document.createElement('div');
    childrenWrap.className = 'children-container';
    nodeDiv.appendChild(childrenWrap);
    
    node.children.forEach(child => {
      renderNode(child, childrenWrap);
    });
  }
}

// 你的原始数据
const treeData = [
  {
    "id": "1",
    "name": "sara",
    "children": [
      { "id": "2", "name": "dian" },
      {
        "id": "3",
        "name": "michael",
        "children": [
          { "id": "4", "name": "dkny" },
          { "id": "5", "name": "Anne" }
        ]
      }
    ]
  },
  { "id": "6", "name": "Tommy" },
  {
    "id": "7",
    "name": "danken",
    "children": [ { "id": "8", "name": "biria" } ]
  }
];

// 渲染所有根节点
treeData.forEach(root => renderNode(root, container));

结构混乱的原因 #

之前渲染出错多半是因为没把子节点挂载到对应父节点的DOM元素里，而是直接将所有节点都添加到了根容器，导致层级丢失变成扁平结构。递归的关键就是让每个子节点的父容器是它上一级节点的DIV，这样才能形成正确的嵌套层级。

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