js生成动态html文件树，支持多层级

您好！JS可以通过DOM操作来生成动态的HTML文件树，以下是一个支持多层级的示例代码：

HTML部分：

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

JS部分：

// 定义一个树形结构的数据
var data = {
  name: "Root",
  children: [
    {
      name: "Level 1-1",
      children: [
        { name: "Level 2-1" },
        { name: "Level 2-2" },
      ],
    },
    {
      name: "Level 1-2",
      children: [
        {
          name: "Level 2-3",
          children: [{ name: "Level 3-1" }, { name: "Level 3-2" }],
        },
      ],
    },
  ],
};

// 生成树形结构的HTML代码
function generateHtmlTree(node) {
  var html = "<ul>";
  html += "<li>" + node.name + "</li>";
  if (node.children) {
    for (var i = 0; i < node.children.length; i++) {
      html += "<li>" + generateHtmlTree(node.children[i]) + "</li>";
    }
  }
  html += "</ul>";
  return html;
}

// 插入HTML代码到页面上
var tree = document.getElementById("tree");
tree.innerHTML = generateHtmlTree(data);

这段代码会生成一个树形结构的HTML文件树，可以支持多层级的节点。您可以根据需要修改数据和样式来适应您的具体场景。