Javascript 如何在vanilla JS中绘制二叉树到HTML+；CSS？

我做作业时卡住了。我需要将我的js二叉树转换为Html+css，而不使用任何hmtl代码。只有香草js

我得到了将所有树元素添加到页面的树和递归函数，但我需要它像ul，li一样

const Node = {
    data: 10,
    left: {
        data: 1,
        left: null,
        right: null
    },
    right: {
        data: 7,
        left: {
            data: 6,
            left: {
                data: 4,
                left: null,
                right: null
            }, 
            right: null
        },
        rigth: null
    }
};

const breadthFirst = function (node) {
    function bf(queue) {
        let newQueue = [];
        queue.forEach(function (node) {
            console.log(node.data);
            const newEl = document.createElement('div');
            newEl.innerText = node.data;
            document.getElementById("app").appendChild(newEl)
            node.left && newQueue.push(node.left);
            node.right && newQueue.push(node.right);
        });
        newQueue.length && bf(newQueue);
    }

    bf([node]);
};

breadthFirst(Node);

所以我在列中有所有元素，但需要像有序列表一样：

• 第一
  • 第二
    • 第四
    • 第五
  • 第三

---

等等。

为了建立树的多层结构，您需要将子元素附加到它们的父元素。我把它分为两个函数

const数据={
数据：10，
左：{
数据：1，
左：空，
右：空
},
对:{
数据：7，
左：{
数据：6，
左：{
数据：4，
左：空，
右：空
}, 
右：空
},
rigth:null
}
};
常量createListItem=（treeNode）=>{
if（！treeNode）{
返回；
}
让项目，子树；
item=document.createElement（'li'）；
item.textContent=treeNode.data；
子树=createSubTreeForNode（treeNode）；
if（子树）{
子项（子树）；
}
退货项目；
};
const createSubTreeForNode=（树节点）=>{
如果（！treeNode.left&！treeNode.right）{
返回；
}
让列表、项目；
列表=document.createElement（'ul'）；
item=createListItem（treeNode.left）；
如果（项目）{
列表。追加子项（项目）；
}
item=createListItem（treeNode.right）；
如果（项目）{
列表。追加子项（项目）；
}
退货清单；
};
常量renderTree=（treeNode，parentElement）=>{
parentElement=parentElement | | document.getElementById（“应用”）；
让根列表，项；
rootList=document.createElement（'ul'）；
item=createListItem（treeNode）；
如果（项目）{
根列表.appendChild（项）；
}
parentElement.appendChild（根列表）；
};
renderTree（数据）
非常感谢您！