原生js实现递归渲染

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>后台
            <!-- <ul>
                <li>数据库</li>
            </ul> -->
        </li>
        <li>前端
            <!-- <ul>
                <li>vue</li>
            </ul> -->
        </li>
    </ul>
</body>
<script>
    let treeData = [
        {
            name:"后台",
            children: [
                {
                    name: "数据库",
                }, {
                    name: "服务器",
                }, {
                    name: "java",
                }
            ]
        },{
            name:"前端",
            children: [
                {
                    name: "vue",
                }, {
                    name: "react",
                }, {
                    name: "angular",
                }
            ]
        }
    ]
    // 纯字符串拼接
    // let str = "";
    // str += "<ul>"
    // for(var i = 0; i < treeData.length; i ++) {
    //     str += "<li>" +  treeData[i].name  +
    //                 if(treeData[i].children.length > 0) {
    //                     for(var j = 0; j < treeData[i].children[j].length; j ++ ) {
    //                         "<ul>" +
    //                             "<li>" + treeData[i].children[j].name + "</li>" +
    //                          "</ul>"   
    //                     }
    //                 }
    //             + "</li>"
    // }
    // str +="</ul>"
    // document.body.innerHTML = str;

    // 递归 
    // let str = "";
    // function recur(tree) {
    //     for(var i = 0; i < tree.length; i ++) {
    //         str += `
    //             <ul>
    //                 <li>${tree[i].name}</li>
    //                ${tree[i].children.length > 0 && recur(tree[i].children)}
    //             </ul>
    //         `
    //     }
    // }
    // recur(treeData);
    // document.body.innerHTML = str;

    //

    var loop = (treeData) => {
        return treeData.map(e => {
            return  e.children?
            `<div>
                <div>${e.name}</div>
                <ul>
                    <li style="padding-left: 20px">${loop(e.children)}</li>
                </ul>
            </div>
            `
        : 
        `
            <div>
                ${e.name}
            </div>
        `


        })
    }
    var html = loop(treeData).join("");
    console.log(html);
    document.body.innerHTML = html



</script>
</html>