从 Javascript 嵌套对象生成 HTML

Question

真的需要你的帮助。我正在尝试编写一个从 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 的回答解决

Answer 1

问题是element.append(create(o.innerHtml, element));但create不返回任何内容，因此undefined附加到每个元素的末尾。改为刚刚create(o.innerHtml, element)反而：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')) {      create(o.innerHtml, element)    }    if (o.innerText) {      element.innerText = o.innerText    }    if (element !== undefined) {      root.append(element);    }  });}create(struct, root);.container {  padding: 5px;  border: 1px solid black;  display: flex;  justify-content: space-around;  align-items: center;}.input {  height: 20px;  width: 200px;}.btn-block {  display: flex;  justify-content: space-around;  align-items: center;}.btn {  border: 1px solid black;  border-radius: 5px;  padding: 5px 15px;  text-align: center;}.btn:hover {  cursor: pointer;}.btn-long {  width: 300px;  margin-right: 10px;}.red {  background: red;  height: 100px;  width: 100px;}

Answer 2

你只需要create(o.innerHtml, element);没有包装element.append(/* ... */);，因为你的函数不返回东西。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')) {       create(o.innerHtml, element);      //element.append();    }    if (o.innerText) {      element.innerText = o.innerText    }    root.append(element);  });}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;create(struct, root);