从字符串制作 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);

});