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>` на нижнем уровне. |