javascript - 从 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);

还有一个 result ;

正如您所看到的，该函数向每个元素添加文本“未定义”。

你能帮我解决这个问题吗？

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;
}