从字符串制作 HTML

Question

这是我的内容：var config = {    first: {        value: 'example', type: 'text', label: 'Name'    },    second: {        value: 'some', type: 'text', label: 'Family' }};根据第一个和第二个进行 2 输入的任何想法？我需要用这种方法制作这个字段：document.createElement('input'); //eg根据我的配置，使用 javascript 制作两个输入 html 字段。

Answer 1

一种解决方案是对所有对象属性进行交互并为每个属性创建一个标签和输入，然后将其附加到 DOM。这是一些示例代码：

var config = {

    first: {

        value: 'example', type: 'text', label: 'Name'

    },

    second: {

        value: 'some', type: 'text', label: 'Family' }

};

Object.keys(config).forEach(key => {

var container = document.getElementById("input-boxes");

var inputEl = document.createElement("input");

var label = document.createElement("LABEL");

label.innerHTML = config[key].label;

inputEl.type = config[key].type;

inputEl.value = config[key].value;

container.appendChild(label); // put label into the DOM

container.appendChild(inputEl); // put it into the DOM

});

以下是此示例在现实中的工作方式：

https://jsfiddle.net/ea65f4sq/3/

Answer 2

https://codepen.io/themustafaomar/pen/YzXmqMY?editors=1011

var config = {

  first: {

    value: "example",

    type: "text",

    label: "Name"

  },

  second: {

    value: "some",

    type: "text",

    label: "Family"

  }

};

Object.keys(config).forEach((key) => {

  var container = document.createElement("div");

  var field = document.createElement("input");

  var label = document.createElement("label");

  label.textContent = config[key].label;

  field.value = config[key].value;

  field.setAttribute("type", config[key].type);

  container.appendChild(label);

  container.appendChild(field);

  document.body.appendChild(container);

});