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)
  • 相关阅读:
    ipython是python的交互式shell工具
    [pip]安装和管理python第三方包
    django 文件上传 研究
    matplotlib01
    mysql数据导出为excel文件
    怎么查看mysql的数据库编码格式
    动态图片、图表
    django 生成复杂的 PDF 文件(数据较多时)
    链接sql数据库并输出csv文件
    django生成文件txt、pdf(在生成 PDF 文件之前,需要安装 ReportLab 库)
  • 原文地址:https://www.cnblogs.com/MDGE/p/14349075.html
Copyright © 2011-2022 走看看