从Javascript嵌套对象生成HTML

我真的需要你的帮助。 我正试图编写一个函数，从javascript对象生成HTML标记

我的想法是发送一个对象和一个根元素作为参数，并递归地附加元素

这是代码

const struct = [
  {
    tag: 'div',
    classes: ['container'],
    innerHtml: [
      {
        tag: 'input',
        classes: ['input'],
        attributes: [
          ['type', 'text'],
          ['placeholder', 'Some input']
        ]
      },
      {
        tag: 'div',
        classes: ['btn-block'],
        innerHtml: [
          {
            tag: 'div',
            classes: ['btn', 'btn-long'],
            innerText: 'Long Button'
          },
          {
            tag: 'div',
            classes: ['btn', 'btn-big', 'btn-img'],
            innerHtml: [
              {
                tag: 'img',
                attributes: [
                  ['src', 'https://www.w3schools.com/images/w3certified_logo_250.png']
                ],
              }
            ],
          }
        ]
      },
      {
        tag: 'div',
        classes: ['red']
      }
    ]
  }
];

const root = document.body;

function create(obj, root) {
  obj.forEach(o => {
    const element = document.createElement(o.tag);

    if (o.classes) {
      const classes = o.classes;
     element.classList.add(...classes);
    }
    if (o.attributes) {
      o.attributes.forEach(a => {
        element.setAttribute(a[0], a[1]);
      })
    }

    if (o.hasOwnProperty('innerHtml')) {
      element.append(create(o.innerHtml, element));
    }

    if (o.innerText) {
      element.innerText = o.innerText
    }

    root.append(element);
  });
}

create(struct, root);

而且有一个,

如您所见，函数将文本“未定义”添加到每个元素

你能帮我修一下吗

UPD：由@CertainPerformance和@Nina Scholz的答案解决，您只需

create(o.innerHtml, element);

不包装

元素。追加（/*…*/）因为函数不返回somthing


函数创建（对象，根）{
对象forEach（o=>{
常量元素=document.createElement（o.tag）；
如有需要（o.L{
常数类=o类；
element.classList.add（…类）；
}
if（o.attributes）{
o、 attributes.forEach（a=>{
setAttribute（a[0]，a[1]）；
})
}
if（o.hasOwnProperty（'innerHtml'））{
创建（o.innerHtml，元素）；
//元素append（）；
}
if（o.innerText）{
element.innerText=o.innerText
}
root.append（元素）；
});
}
常量结构=[{
标签：“div”，
类别：[“容器”]，
innerHtml：[{
标记：“输入”，
类：[“输入”]，
属性：[
['type'，'text']，
[‘占位符’、‘某些输入’]
]
},
{
标签：“div”，
类别：['btn-block']，
innerHtml：[{
标签：“div”，
类别：['btn'，'btn long']，
innerText:“长按钮”
},
{
标签：“div”，
类别：['btn'，'btn big'，'btn img']，
innerHtml：[{
标签：“img”，
属性：[
['src'，'https://www.w3schools.com/images/w3certified_logo_250.png']
],
}],
}
]
},
{
标签：“div”，
类别：[“红色”]
}
]
}];
const root=document.body；
创建（结构，根）您只需要

create(o.innerHtml, element);

不包装
元素。追加（/*…*/）因为函数不返回somthing


函数创建（对象，根）{
对象forEach（o=>{
常量元素=document.createElement（o.tag）；
如有需要（o.L{
常数类=o类；
element.classList.add（…类）；
}
if（o.attributes）{
o、 attributes.forEach（a=>{
setAttribute（a[0]，a[1]）；
})
}
if（o.hasOwnProperty（'innerHtml'））{
创建（o.innerHtml，元素）；
//元素append（）；
}
if（o.innerText）{
element.innerText=o.innerText
}
root.append（元素）；
});
}
常量结构=[{
标签：“div”，
类别：[“容器”]，
innerHtml：[{
标记：“输入”，
类：[“输入”]，
属性：[
['type'，'text']，
[‘占位符’、‘某些输入’]
]
},
{
标签：“div”，
类别：['btn-block']，
innerHtml：[{
标签：“div”，
类别：['btn'，'btn long']，
innerText:“长按钮”
},
{
标签：“div”，
类别：['btn'，'btn big'，'btn img']，
innerHtml：[{
标签：“img”，
属性：[
['src'，'https://www.w3schools.com/images/w3certified_logo_250.png']
],
}],
}
]
},
{
标签：“div”，
类别：[“红色”]
}
]
}];
const root=document.body；
创建（结构，根）问题是

element.append(create(o.innerHtml, element));

但是
create
不会返回任何内容，因此
undefined
会附加到每个元素的末尾。改为

create(o.innerHtml, element)

相反：


const结构=[{
标签：“div”，
类别：[“容器”]，
innerHtml：[{
标记：“输入”，
类：[“输入”]，
属性：[
['type'，'text']，
[‘占位符’、‘某些输入’]
]
},
{
标签：“div”，
类别：['btn-block']，
innerHtml：[{
标签：“div”，
类别：['btn'，'btn long']，
innerText:“长按钮”
},
{
标签：“div”，
类别：['btn'，'btn big'，'btn img']，
innerHtml：[{
标签：“img”，
属性：[
['src'，'https://www.w3schools.com/images/w3certified_logo_250.png']
],
}]
}
]
},
{
标签：“div”，
类别：[“红色”]
}
]
}];
const root=document.body；
函数创建（对象，根）{
对象forEach（o=>{
常量元素=document.createElement（o.tag）；
如有需要（o.L{
常数类=o类；
element.classList.add（…类）；
}
if（o.attributes）{
o、 attributes.forEach（a=>{
setAttribute（a[0]，a[1]）；
})
}
if（o.hasOwnProperty（'innerHtml'））{
创建（o.innerHtml，元素）
}
if（o.innerText）{
element.innerText=o.innerText
}
如果（元素！==未定义）{
root.append（元素）；
}
});
}
创建（结构，根）
.container{
填充物：5px；
边框：1px纯黑；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
}
.输入{
高度：20px；
宽度：200px；
}
.btn块{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
}
.btn{
边框：1px纯黑；
边界半径：5px；
填充：5px15px；
文本对齐：居中；
}
.btn:悬停{
光标：指针；
}
.btn long{
宽度：300px；
右边距：10px；
}
瑞德先生{
背景：红色；
高度：100px；
宽度：100px；
}
问题是

element.append(create(o.innerHtml, element));

但是
create
不会返回任何内容，因此
undefined
会附加到每个元素的末尾。改为

create(o.innerHtml, element)

相反：


const结构=[{
标签：“div”，
类别：[“容器”]，
innerHtml：[{
标记：“输入”，
类：[“输入”]，
属性：[
['type'，'text']，
[‘占位符’、‘某些输入’]
]
},
{
标签：“div”，
类别：['btn-block']，