用以下数据生成对应的dom
//假设以下数数据中有1000个节点,请现实一个通用方法用下面的数据生成对应的dom结构
//数据
const treeData = [
{"name": "A-1"},
{"name": "A-2"},
{"name": "A-3"},
{
"name": "A-4",
"sub": [
{"name": "A-4-1"},
{"name": "A-4-2"},
{
"name": "A-4-3",
"sub": [
{"name": "A-4-3-1"},
{"name": "A-4-3-2"}
]
}
]
}
...
];
//dom结构
<div class="A-1"></div>
<div class="A-2"></div>
<div class="A-3"></div>
<div class="A-4">
<div class="A-4-1">
<div class="A-4-2">
<div class="A-4-3">
<div class="A-4-2-1"></div>
<div class="A-4-3-2"></div>
</div>
</div>
...
解答:
function treeToDom(treeData) {
let html = document.createElement("div");
for (let i = 0; i < treeData.length; i++) {
let item = treeData[i];
let sub = item.sub;
let subDom = document.createElement("div");
subDom.className = "sub";
subDom.innerText = item.name;
html.appendChild(subDom);
if (sub) {
subDom.className = "sub";
subDom.appendChild(treeToDom(sub));
}
}
return html;
}
let html = treeToDom(treeData);
document.body.appendChild(html);