templet = {
type:"div",
attr:{ id:"div2"},
classList:["2"],
children:[
{
type:"span",
attr:{ id:"text1", value:"is text"},
classList:["1"],
id:"span1",
events:{},
children:[
{
type:"span",
attr:{ id:"son1", value:"is son1"},
classList:["1"],
id:"son1",
events:{},
}
]
},
{
type:"p",
attr:{ id:"p1", value:"is p"},
classList:["1"],
id:"p1",
events:{},
children:[
{
type:"p",
attr:{ id:"p2", value:"is son2"},
classList:["1"],
id:"son2",
events:{},
}
]
},
],
id:"div2",
events:{}
}
function createDOM(obj){
const {type,attr,children,id} = obj
let root = document.createElement(type)
console.log(root)
if(attr){
let key = Object.keys(attr)
key.forEach(item => {
if(item !== 'value'){
root.setAttribute(item,attr[item])
}else if(item === 'value'){
root.innerText = attr[item]
}
});
}
if(children){
let child = Object.values(children)
for(let i=0;i<child.length;i++){
let c = createDOM(child[i])
root.appendChild(c)
}
return root
}else{
return root
}
}
let c = createDOM(templet)
console.log(c)
document.body.appendChild(c)