JavaScript递归渲染JSON为HTML嵌套列表层级错误排查

问题原因 #

• 核心错误是recurse函数内的li、ul变量没有加let/const声明，默认挂载到全局作用域，每次递归调用都会覆盖上一次创建的节点变量，导致子节点插入的父级完全错乱，最终呈现不符合预期的阶梯嵌套结构。
• 附加冗余问题：当前逻辑无论节点是否有子节点，都会创建空的ul标签插入到li内，属于不必要的冗余DOM。

修复后的JS代码 #

const db = JSON.parse(`
{
    "title": "Root", 
    "children": [
        {
            "title": "Child1",
            "children": [
                {"title": "Child1a"},
                {"title": "Child1b"},
                {"title": "Child1c"}
            ]
        },
        {
            "title": "Child2",
            "children": [
                {"title": "Child2a"},
                {"title": "Child2b"},
                {"title": "Child2c"}
            ]
        }
    ]
}
`);

function recurse(u, j) {
  // 变量添加const声明，限制在当前函数作用域，不会被后续递归覆盖
  const li = document.createElement('li');
  li.setAttribute('title', j.title);
  u.appendChild(li);

  // 仅当存在子节点时才创建ul，避免冗余DOM
  if (j.children?.length) {
    const ul = document.createElement('ul');
    li.appendChild(ul);
    j.children.forEach(c => {
      recurse(ul, c);
    });
  }
}

recurse(document.getElementById('tree'), db);

修复后渲染的嵌套列表层级完全符合JSON数据结构，Root节点下存在Child1、Child2两个同级子节点，两个子节点下分别对应自己的三级子节点。

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