Solution 1 :
You need to draw dom via binary tree algorithm i.e. depth first.
Algorithm is:
Draw root element, find its children
Start from first child, draw it, find its children
Keep on repeating step 2 until you you reach bottom of the tree.
Then go to next child from step 2 and perform same steps as for the first child.
By following above steps I think you can easily draw DOM using depth first binary tree algorithm.
Take a look at sample below
<body>
<div id="root"></div>
</body>
const graph = {
A: ['B', 'C'],
B: ['D', 'E'],
C: ['F', 'G'],
D: [],
E: [],
F: [],
G: [],
}
const root = document.getElementById("root");
const findchildren = (node) => graph[node]
const drawNode = (node) => {
const input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("placeholder", node);
root.appendChild(input);
const children = findchildren(node)
if (children.length > 0) {
children.forEach(item => drawNode(item))
}
}
drawNode("A")
Solution 2 :
I do this, but not enjoy.
const dataset = {
A: ['B', 'C'],
B: ['D', 'E'],
C: ['F', 'G'],
D: [],
E: [],
F: [],
G: [],
}
const $tree = document.querySelector('.tree')
function graphToHTML(node, root) {
if (Object.values(node)[0].length === 0) return
let ul = document.createElement('ul')
let input = document.createElement('input')
input.placeholder = Object.values(node)[0][0]
root.append(ul)
ul.append(input)
graphToHTML(
{ [Object.values(node)[0][0]]: dataset[Object.values(node)[0][0]] },
ul
)
ul = document.createElement('ul')
input = document.createElement('input')
input.placeholder = Object.values(node)[0][1]
root.append(ul)
ul.append(input)
graphToHTML(
{ [Object.values(node)[0][1]]: dataset[Object.values(node)[0][1]] },
ul
)
}
let ul = document.createElement('ul')
let input = document.createElement('input')
input.placeholder = Object.keys(dataset)[0]
ul.append(input)
$tree.append(ul)
graphToHTML({ A: ['B', 'C'] }, ul)
Problem :
How to get this:
<ul>
<input type="text" placeholder="A" />
<ul>
<input type="text" placeholder="B" />
<ul>
<input type="text" placeholder="D" />
</ul>
<ul>
<input type="text" placeholder="E" />
</ul>
</ul>
<ul>
<input type="text" placeholder="C" />
<ul>
<input type="text" placeholder="F" />
</ul>
<ul>
<input type="text" placeholder="G" />
</ul>
</ul>
</ul>
out of it:
const graph = {
A: ['B', 'C'],
B: ['D', 'E'],
C: ['F', 'G'],
D: [],
E: [],
F: [],
G: [],
}
const graph means:
A
/
B C
/ /
D E F G
Without using oop graph.
Comments
Comment posted by Andreas
The expected markup is invalid
Comment posted by user14768863
I tried to use recursion but with no success. Perhaps I am setting the graph incorrectly, and the only solution is through OOP, but I would like to solve it as it is.
Comment posted by user14768863
Yes, i think this is post order graph traversal. This works when I use the class node with data, left and right fields.
Comment posted by Ayaz Alavi
let me write sample code for you. gimme a moment.
Comment posted by user14768863
do u would can check my solution?
Comment posted by Ayaz Alavi
looks great. I tried making compact version.
Post navigation
