I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code.
I have the tree structure and a recursive function that adds all the tree elements to the page, but I need it to be displayed like an unordered list (ul) with list items (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
},
right: 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);
Currently, I have all elements displayed in a column format, but I want them to be structured as an ordered list:
- first
- second
- fourth
- fifth
- third
- second
and so on.