回到课程

从对象创建树

重要程度: 5

编写一个函数 createTree,从嵌套对象创建一个嵌套的 ul/li 列表(list)。

例如:

let data = { "Fish": { "trout": {}, "salmon": {} }, "Tree": { "Huge": { "sequoia": {}, "oak": {} }, "Flowering": { "apple tree": {}, "magnolia": {} } } };

语法:

let container = document.getElementById('container'); createTree(container, data); // 将树创建在 container 中

结果(树)看起来像这样:

选择下面两种方式中的一种,来完成这个任务:

  1. 为树创建 HTML,然后将它们赋值给 container.innerHTML
  2. 创建节点树,并使用 DOM 方法将它们附加(append)上去。

如果这两种方式你都做,那就太好了。

P.S. 树上不应该有“多余”的元素,例如空的 <ul></ul> 叶子节点。

打开一个任务沙箱。

遍历对象的最简单的方法是使用递归。

  1. 使用 innerHTML 的解决方案
  2. 使用 DOM 的解决方案