zoukankan      html  css  js  c++  java
  • createElement

    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)
  • 相关阅读:
    JavaScript
    css-装饰
    html 标签
    remote connect openshift mysql
    MySQL
    how to run a continuous background task on OpenShift
    openshifit 安装 redis
    Python之路,Day6
    选择排序
    C语言实现链表
  • 原文地址:https://www.cnblogs.com/MDGE/p/14349075.html
Copyright © 2011-2022 走看看