JavaScript 将虚拟节点数据，具象化成实际的标签，并在页面中显示出来

要求：给了一个虚拟的数据（是一个对象）里面记录了这个页面中的标签，以及各个标签的属性和包含的内容。通过给定的虚拟节点数据，利用js让其在页面上显示出来。

    //这时给定的虚拟节点数据
        var element = {
            tagName: "div",   //要添加的标签的名称
            id: "header",     //标签的id
            className: "title fz28",    //标签的className
            contentText: "我是一个header标签",  //标签的内容
            child:[     //该标签里含有的子标签               
                {
                    tagName: "h1",
                    id: "",
                    className: "logo",
                    contentText: "我是logo",
                    child: []
                },
                {
                    tagName: "ul",
                    id: "",
                    className: "nav",
                    contentText: "",
                    child: [
                        {
                            tagName: "li",
                            id: "",
                            className: "list",
                            contentText: "导航1 ",
                            child: []
                        },
                        {
                            tagName: "li",
                            id: "",
                            className: "list",
                            contentText: "导航2",
                            child: []
                        }
                    ]
                }
            ]
        }



       
        function drawElement(element,parentEle) {    //element为给的数据，parentEle为具象化的位置
            var vDom = document.createElement(element["tagName"]);
            element["innerText"] = element["contentText"];   //标签属性中没有cotentText这一属性，将其这样转化一下以便下面进行遍历赋值
            for(var key in element) {
                vDom[key] = element[key];
            }
            parentEle.appendChild(vDom);

            if(element["child"].length > 0) {
                for(var i = 0; i<element["child"].length;i++) {
                    drawElement(element["child"][i],vDom);   //主要这里的第二个参数传的是vDom
                }
            }
        }

        drawElement(element,document.body);