如何使用 HTML、CSS 和 JavaScript 动态生成嵌套文件夹树结构-html教程-PHP中文网

如何使用 HTML、CSS 和 JavaScript 动态生成嵌套文件夹树结构

本文详解如何基于递归思想，用纯 javascript 将嵌套对象数据渲染为具有层级缩进与视觉标识的 html 文件夹树，并配套简洁 css 实现可维护、可扩展的树形 ui。

本文详解如何基于递归思想，用纯 javascript 将嵌套对象数据渲染为具有层级缩进与视觉标识的 html 文件夹树，并配套简洁 css 实现可维护、可扩展的树形 ui。

在构建文档管理、资源导航或配置面板等前端应用时，常需将层级化数据（如目录结构）可视化为树形控件。本文提供一种轻量、无依赖的实现方案：仅用原生 HTML、CSS 和 JavaScript，将类似文件系统结构的嵌套对象（name + children）动态转换为语义清晰、样式可控的 DOM 树。

核心思路：递归遍历 + 元素构造

关键在于封装一个递归函数 walk(dest, node)，它接收两个参数：目标容器元素 dest（即当前层级的插入位置）和待渲染的数据节点 node。每层调用中：

创建表示当前节点的
容器；
插入装饰符号（如 "-"）和文件夹名称；
若存在子节点，则创建 .children-list 容器，并为每个子节点新建 .children-item 作为递归入口。

为提升代码可读性与复用性，我们引入辅助函数 makeEl(tag, props)，统一处理元素创建与属性赋值：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

function makeEl(tag, props) {
  const el = document.createElement(tag);
  Object.assign(el, props);
  return el;
}

完整可运行示例

HTML 结构（基础容器）：



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Folder Tree Generator</title><style>
    .children-list {
      padding-left: 12px;
    }
    .flex {
      display: flex;
    }
    .items-center {
      align-items: center;
    }
    .gap-x-12 {
      gap: 3rem; /* 等效于 tailwind 的 gap-x-12 */
    }
    .font-bold {
      font-weight: bold;
    }
  </style><div class="static-page">
    <div class="container">
      <div class="tree"></div>
    </div>
  </div>

  <script>
    // 数据源（支持任意深度）
    const data = {
      name: "Root",
      children: [
        {
          name: "Folder 1",
          children: [
            { name: "Folder 1-1" },
            { name: "Folder 1-2" }
          ]
        },
        {
          name: "Folder 2",
          children: [
            { name: "Folder 2-1" },
            { name: "Folder 2-2" }
          ]
        }
      ]
    };

    // 工具函数：创建带属性的元素
    function makeEl(tag, props) {
      const el = document.createElement(tag);
      Object.assign(el, props);
      return el;
    }

    // 递归渲染主函数
    function walk(dest, node) {
      // 渲染当前节点行
      const nodeEl = makeEl("div", {
        className: "flex items-center gap-x-12 font-bold"
      });
      nodeEl.appendChild(makeEl("span", { textContent: "-" }));
      nodeEl.appendChild(makeEl("span", { textContent: node.name }));
      dest.appendChild(nodeEl);

      // 若有子节点，递归渲染
      if (Array.isArray(node.children) && node.children.length > 0) {
        const listEl = makeEl("div", { className: "children-list" });
        dest.appendChild(listEl);

        node.children.forEach(child => {
          const itemEl = makeEl("div", { className: "children-item" });
          listEl.appendChild(itemEl);
          walk(itemEl, child); // 递归调用
        });
      }
    }

    // 启动渲染（挂载到 .tree 容器）
    document.addEventListener("DOMContentLoaded", () => {
      walk(document.querySelector(".tree"), data);
    });
  </script>

注意事项与最佳实践

✅ 数据健壮性：walk() 中使用 Array.isArray(node.children) 替代简单 node.children && node.children.length 判断，避免因 children: null 或 undefined 导致运行时错误；
✅ 语义化与可访问性：当前示例以
为主，如需增强可访问性，可在实际项目中替换为
- 结构，并添加 aria-expanded、role="tree" 等属性；
- ⚠️ 性能提示：对于超深或超宽树（>1000 节点），建议结合虚拟滚动或懒加载（IntersectionObserver）优化首次渲染性能；
- ? 样式解耦建议：.flex, .items-center 等类名源自 Tailwind CSS；若未使用该框架，请替换为标准 CSS 类或内联样式，确保样式独立可控。
通过本方案，你不仅获得了一个即插即用的文件夹树生成器，更掌握了“数据驱动视图”的核心范式——将复杂嵌套结构转化为可预测、可测试、易维护的前端逻辑。后续可轻松扩展折叠/展开交互、图标支持、右键菜单等功能，而无需重构底层渲染机制。