如何使用纯DOM和香草JavaScript在JavaScript中的列表中创建列表？

我正在尝试使用纯DOM和香草JavaScript在另一个列表中创建多个列表，使用我提供的对象数组

对象数组

var directory = [
{ type: 'file', name: 'file1.txt' },
{ type: 'file', name: 'file2.txt' },
{
    type: 'directory',
    name: 'HTML Files',
    files: [
        { type: 'file', name: 'file1.html' },
        { type: 'file', name: 'file2.html' }
    ]
},
{ type: 'file', name: 'file3.txt' },
{
    type: 'directory',
    name: 'JavaScript Files',
    files: [
        { type: 'file', name: 'file1.js' },
        { type: 'file', name: 'file2.js' },
        { type: 'file', name: 'file3.js' }
    ]
}
];

---

任何帮助都将不胜感激。谢谢！：）

您可以创建递归函数

var目录=[{
键入：“文件”，
名称：“file1.txt”
},
{
键入：“文件”，
名称：“file2.txt”
},
{
键入：“目录”，
名称：“HTML文件”，
档案：[{
键入：“文件”，
名称：“file1.html”
},
{
键入：“文件”，
名称：“file2.html”
}
]
},
{
键入：“文件”，
名称：“file3.txt”
},
{
键入：“目录”，
名称：“JavaScript文件”，
档案：[{
键入：“文件”，
名称：“file1.js”
},
{
键入：“文件”，
名称：“file2.js”
},
{
键入：“文件”，
名称：“file3.js”
}
]
}
];
让列表=“”；
//递归函数
函数createList（数组）{
array.forEach（函数（项）{
if（item.type=='file'&&！item.files）{
//模板文本
列表+=`
${item.name}
`
} 
//检查文件是否为数组，然后调用递归函数
else if（item.files&&item.files.length>0）{
列表+=`
${item.name}
`
createList（item.files）
}
})
退货清单；
}
document.getElementById（'liContainer'）。innerHTML=createList（目录）
使用递归函数和dom元素creater
createElement（）
函数


var directory=[{type:'file'，name:'file1.txt'}，{type:'file'，name:'file2.txt'}，{type:'directory'，name:'HTML Files'，Files:[{type:'file'，name:'file1.HTML'}，{type:'file'，name:'file3.txt'}，{type:'directory'，name:'JavaScript Files'，Files:[{type:'file'，name:'file1.js'}，{type:'file'，name:'file2.js'}，{type:'file'，name:'file3.js'}]}；
函数创建者（arr）{
var-str=''；
var last=“”；
arr.forEach（函数（a，b）{
var ul=document.createElement（'ul'）
var li=document.createElement（'li'）
如果（a.文件）{
如果（a.名称）{
li.innerHTML=a.name；
last=li；
}
最后追加（ul）
ul.innerHTML=creater（a.files）；
str+=last.outerHTML；
}否则{
li.innerHTML=a.name；
last=li；
str+=li.outerHTML；
}
});
返回str
}
document.body.innerHTML=creater（目录）；
liul{
列表样式类型：圆形；
}
请学习。Stackoverflow在您询问特定问题时效果最好。它不是一个提问的好地方，它要求模糊的帮助来编写完整的应用程序，即使是一个小应用程序。你好，新投稿人！我真的不想否决新投稿人的问题，但您的问题完全不清楚。您能澄清一下吗fy关于输入是什么，输出是什么，以及给我们更多关于javascript/DOM有什么问题的信息？如果你能做到这一点，我会很高兴地删除我的否决票，好吗？我想你有这个对象，你想要其他东西还是什么错了？我猜OP似乎想使用t他提供了数组来生成DOM UL->LI嵌套结构，正如它们在图像中显示的那样。但是usre需要尝试。因此，我在对象数组中得到了一组对象实例。一些对象实例需要打印为另一个列表下的列表。例如，如图所示，“files.name”实例显示为LI我已经多次尝试创建列表，但它只打印一个列表。我的尝试：var dr=document.getElementById（'dir'）；for（var a=0；a'+directory[a].name+''；}}str=''的意义是什么；比如它是一个空字符串有什么意义？谢谢你的回答！！是的。最初str声明为空。因为如果不为空，它将不匹配任何条件。它的返回值
未定义
这是为什么