for 循环ul li 生成树形图

好的，下面是一个使用 `for` 循环来生成树形结构的示例代码：

<ul id="tree"></ul>

const data = [
  { id: 1, name: '节点1', parentId: 0 },
  { id: 2, name: '节点2', parentId: 1 },
  { id: 3, name: '节点3', parentId: 1 },
  { id: 4, name: '节点4', parentId: 2 },
  { id: 5, name: '节点5', parentId: 2 },
  { id: 6, name: '节点6', parentId: 4 },
  { id: 7, name: '节点7', parentId: 4 },
];

function createTree(data) {
  const map = {};
  const roots = [];
  
  data.forEach(item => {
    const node = { id: item.id, name: item.name, children: [] };
    map[item.id] = node;
    
    if (item.parentId === 0) {
      roots.push(node);
    } else {
      const parent = map[item.parentId];
      parent.children.push(node);
    }
  });
  
  return roots;
}

function renderTree(node, level) {
  const ul = document.createElement('ul');
  
  node.forEach(item => {
    const li = document.createElement('li');
    const text = document.createTextNode(item.name);
    li.appendChild(text);
    ul.appendChild(li);
    
    if (item.children.length > 0) {
      const childrenUl = renderTree(item.children, level + 1);
      childrenUl.style.marginLeft = `${level * 20}px`;
      li.appendChild(childrenUl);
    }
  });
  
  return ul;
}

const tree = createTree(data);
const treeEl = document.getElementById('tree');
treeEl.appendChild(renderTree(tree, 0));

上面的代码首先定义了一个包含节点数据的数组 `data`，然后定义了一个 `createTree` 函数，用于将节点数据转换为树形结构。在 `createTree` 函数中，我们使用了一个 `map` 对象来存储每个节点的引用，然后遍历每个节点，如果它是根节点，则将其添加到 `roots` 数组中，否则找到它的父节点，将其添加到父节点的 `children` 数组中。

接下来，我们定义了一个 `renderTree` 函数，用于将树形结构渲染为 HTML。在 `renderTree` 函数中，我们使用 `document.createElement` 方法创建 `ul` 和 `li` 元素，然后遍历每个节点，将节点的名称添加到 `li` 中，然后递归调用 `renderTree` 函数，将子节点渲染为 HTML，并将其添加到当前节点的 `li` 元素中。最后，我们将根节点渲染为 HTML，并将其添加到页面中的 `ul` 元素中。