Напишите функцию createTree, которая создаёт вложенный список ul/li из объекта.

Например:

let data = { "Рыбы": { "форель": {}, "лосось": {} }, "Деревья": { "Огромные": { "секвойя": {}, "дуб": {} }, "Цветковые": { "яблоня": {}, "магнолия": {} } } };

Синтаксис:

let container = document.getElementById('container'); createTree(container, data); // создаёт дерево в контейнере

Результат (дерево):

Выберите один из двух способов решения этой задачи:

1. Создать строку, а затем присвоить через container.innerHTML.
2. Создавать узлы через методы DOM.

Если получится – сделайте оба.

P.S. Желательно, чтобы в дереве не было лишних элементов, в частности -– пустых <ul></ul> на нижнем уровне.

Открыть песочницу для задачи.