alexander909090,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.folder:before {
width: 45px;
height: 45px;
display: block;
background-image:url(http://icons.iconarchive.com/icons/wilnichols/alumin-folders/128/Generic-Purple-Folder-icon.png);
content:'';
background-size: cover;
}
.folder {
display: flex;
}
.file:before {
width: 45px;
height: 45px;
display: block;
background-image:url(http://icons.iconarchive.com/icons/icons8/windows-8/128/Very-Basic-File-icon.png);
content:'';
background-size: cover;
}
ul{
list-style: none;
padding-top: 8px;
}
body > ul > li {
border-top: 3px solid #0000FF;
}
ul > li{
margin-left: -20px;
margin-top: 20px;
}
</style>
</head>
<body>
<script>
const data = [
{
'folder': true,
'title': 'Pictures',
'children': [
{
'title': 'logo.png'
},
{
'folder': true,
'title': 'Vacations',
'children': [
{
'title': 'spain.jpeg'
}
]
}
]
},
{
'folder': true,
'title': 'Desktop',
'children': [
{
'folder': true,
'title': 'screenshots',
'children': null
}
]
},
{
'folder': true,
'title': 'Downloads',
'children': [
{
'folder': true,
'title': 'JS',
'children': null
},
{
'title': 'nvm-setup.exe'
},
{
'title': 'node.exe'
}
]
},
{
'title': 'credentials.txt'
}
];
const createTree = ar => {
let html = `<ul>`;
for(let {folder, title, children} of ar) {
children = (Array.isArray(children)) ? createTree(children) : '';
folder = folder ? 'folder' : 'file';
html += `<li class="${folder}">${title}${children}</li>`;
}
html+=`</ul>`;
return html
}
document.body.insertAdjacentHTML('beforeend', createTree(data))
</script>
</body>
</html>