如何使用递归把一个并不复杂的数据转化成这样的 DOM 结构？

要动态地渲染导航菜单，其中每个对象都对应一个菜单项，菜单项可以有子菜单，子菜单也可以有子子菜单。这样的数组结构如何转化成以下的 DOM 结构：

var data = [ {title: 'menu 1'}, { title: 'menu 2', children: [ title: 'menu 2-1' children: [ // ] ] } ] 

<div class='tree'> <div class='tree-node'> <span class='node-title'></span> </div> <div class='node-children'> <div class='tree-node'> ... </div> </div> </div> 

我的思路大概是这样的，不限层级、具有相似结构的数据可以用递归实现，但写着写着写到一半做不下去了。 有啥办法在 populateMenu 函数的大致框架下把功能实现吗？更好的做法是什么？有时候代码写到一半才发现不对劲，怎么避免这种情况呢？

<div class='menu'></div> var cOntainer= document.querySelector('.menu') function populateMenu(tree) { for(var i = 0; i <tree.length; i) { var objItem = tree[i] //取出每一个对象 var node = document.createElement('div') node.classList.add('tree-node') //... if(objItem.children) { populateMenu(objItem.children) } } }