从对象创建树

编写一个函数 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 中
        

结果（树）看起来像这样：

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

为树创建 HTML，然后将它们赋值给 container.innerHTML。
创建节点树，并使用 DOM 方法将它们附加（append）上去。

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

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

打开一个任务沙箱。

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

使用 innerHTML 的解决方案。
使用 DOM 的解决方案。