JavaScript 列表树 js的创建

JavaScript 列表树 js的创建

        let data = {
            "Fish": {
                "trout": {},
                "salmon": {}
            },

            "Tree": {
                "Huge": {
                    "sequoia": {},
                    "oak": {}
                },
                "Flowering": {
                    "apple tree": {},
                    "magnolia": {}
                }
            }
        };

创建该列表，如图

/*
//第一种
 <li>p
    <ul>

    </ul>
 </li>
 //第二种
    <li>p</li>
    */
        function createTree(container, data){
            for(let p in data){
                //创建当前节点 
                if(data[p]!=null){ //非空就是个队列 <ul>finish<ul>tourish</ul>
                    let li = document.createElement("li");
                    li.prepend(p);   
                    container.append(li); 
                    let ul = document.createElement("ul"); 
                    li.append(ul);
                    createTree(ul, data[p]);
                }
                else{
                    let li = document.createElement("li");
                    li.innerHTML = p;
                    container.append(li);
                }
            }
        }
        createTree(container,data);

在此基础上，再标出子节点的个数 ，如图

        createTree(container, data); //树已创建
        //下来标出后代数量 container
        for (let ele of container.querySelectorAll("li")) {
            ele.firstChild.data += ele.querySelectorAll("li").length;
        }

不可使用innerHTML 否则会将标签也消除掉，每个文本是li中的第一个节点，因此采用ele.firstChild选中该节点，再将data换掉。