50 lines
No EOL
1.2 KiB
Markdown
50 lines
No EOL
1.2 KiB
Markdown
# Создайте дерево из объекта
|
||
|
||
[importance 5]
|
||
|
||
Напишите функцию, которая создаёт вложенный список `UL/LI` (дерево) из объекта.
|
||
|
||
Например:
|
||
|
||
```js
|
||
var data = {
|
||
"Рыбы": {
|
||
"Форель": {},
|
||
"Щука": {}
|
||
},
|
||
|
||
"Деревья": {
|
||
"Хвойные": {
|
||
"Лиственница": {},
|
||
"Ель": {}
|
||
},
|
||
"Цветковые": {
|
||
"Берёза": {},
|
||
"Тополь": {}
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
Синтаксис:
|
||
|
||
```js
|
||
var container = document.getElementById('container');
|
||
*!*
|
||
createTree(container, data); // создаёт
|
||
*/!*
|
||
```
|
||
|
||
Результат (дерево):
|
||
|
||
[iframe border=1 src="solution"]
|
||
|
||
Выберите один из двух способов решения этой задачи:
|
||
<ol>
|
||
<li>Создать строку, а затем присвоить через `container.innerHTML`.</li>
|
||
<li>Создавать узлы через методы DOM.</li>
|
||
</ol>
|
||
|
||
Если получится -- сделайте оба.
|
||
|
||
P.S. Желательно, чтобы в дереве не было лишних элементов, в частности -- пустых `<ul></ul>` на нижнем уровне. |