Nov 19, 2022

# Solution 1 :

You need to draw dom via binary tree algorithm i.e. depth first.

Algorithm is:

1. Draw root element, find its children

2. Start from first child, draw it, find its children

3. Keep on repeating step 2 until you you reach bottom of the tree.

4. 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.
A draft, maybe I’ll improve it, but I’ve been doing it all day, so I’m tired.

`````` 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.
You can remove input from lists, then just insert the name of the vertex.

# 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.