如何用JavaScript根据给定数据生成树形文件夹HTML结构？

要从嵌套的文件夹数据生成指定HTML结构，最直接的方式是通过递归遍历树形数据逐层构建DOM元素。以下是完整的JavaScript实现：

// 递归生成单个文件夹节点的DOM结构
function createFolderNode(node, level = 0) {
  // 创建标题容器
  const titleDiv = document.createElement('div');
  titleDiv.className = 'flex items-center gap-x-12 font-bold';
  
  // 添加"-"标记
  const dashSpan = document.createElement('span');
  dashSpan.textContent = '-';
  // 添加文件夹名称，处理格式（将"-"替换为" - "）
  const nameSpan = document.createElement('span');
  nameSpan.textContent = node.name.replace("-", " - ");
  
  titleDiv.appendChild(dashSpan);
  titleDiv.appendChild(nameSpan);
  
  // 组装当前节点容器
  const nodeContainer = document.createElement('div');
  nodeContainer.appendChild(titleDiv);
  
  // 处理子节点
  if (node.children && node.children.length > 0) {
    const childrenList = document.createElement('div');
    childrenList.className = 'children-list';
    
    node.children.forEach(child => {
      const childNode = createFolderNode(child, level + 1);
      // 仅根节点的直接子节点需要包裹在children-item中
      if (level === 0) {
        const childItem = document.createElement('div');
        childItem.className = 'children-item';
        childItem.appendChild(childNode);
        childrenList.appendChild(childItem);
      } else {
        childrenList.appendChild(childNode);
      }
    });
    
    nodeContainer.appendChild(childrenList);
  }
  
  return nodeContainer;
}

// 页面加载完成后执行生成逻辑
document.addEventListener('DOMContentLoaded', () => {
  const treeContainer = document.querySelector('.tree');
  const rootNode = createFolderNode(data);
  treeContainer.appendChild(rootNode);
});

代码说明 #

1. 递归函数核心：createFolderNode负责处理单个节点，接收当前数据和层级参数。层级参数用来区分是否给子节点添加children-item类（仅根节点的直接子节点需要）。
2. 标题元素构建：每个节点都会生成带"-"标记和格式化名称的标题容器，确保和目标HTML的名称格式一致。
3. 子节点层级处理：存在子节点时生成children-list容器，递归生成子节点DOM，并根据层级决定是否包裹children-item。
4. 页面初始化：通过DOMContentLoaded事件确保DOM加载完成后，找到.tree容器并插入生成的根节点。

将上述代码保存为index.js并放在目标HTML同级目录下，即可自动生成需求中的HTML结构。

内容的提问来源于stack exchange，提问作者Trần Tuấn Đạt