我有一串数据

data = [
        {
            id: "01",
            name: "上海",
            content: "上海是个是个好地方",
            isleaf: false,
            children: [
                {
                    parent: "01",
                    id: "01-1",
                    name: "黄浦",
                    content: "黄浦是个是个好地方",
                    isleaf: true
                },
                {
                    parent: "01",
                    id: "01-2",
                    name: "静安",
                    content: "静安是个是个好地方",
                    isleaf: true
                },
                {
                    parent: "01",
                    id: "01-3",
                    name: "普陀",
                    content: "普陀是个是个好地方",
                    isleaf: true
                }
            ]
        },
        {
            id: "02",
            name: "北京",
            content: "北京是个是个好地方",
            isleaf: false,
            children: [
                {
                    parent: "02",
                    id: "02-1",
                    name: "朝阳",
                    content: "朝阳是个是个好地方",
                    isleaf: true
                },
                {
                    parent: "02",
                    id: "02-2",
                    name: "东城",
                    content: "东城是个是个好地方",
                    isleaf: true
                }
            ]
        }
    ]

页面结构如下

我想通过一个函数生成一段二级导航，但是这个函数有问题，函数如下：

function buildTree (data, parent) {
        var dom = '';

        for(var i=0; i');

            dom += '
'+data[i].name+'
';
            ul.append(dom);
            //parent.find('ul:first').remove();
            parent.append(ul);

            if(!data[i].isleaf) {
                buildTree (data[i].children, $('#'+data[i].id));
            } else {

            }

        }

        console.log(dom);

    }

    buildTree(data, $('.left'))

输出结果重复计算了

我知道问题出在parent.append(ul)这里，但是我不知道怎样修改它，请问这个问题要怎么解决？谢谢了。