Question

我有一个使用JSON数据运行的Web应用程序，我提取了一部分并最终得到了具有某些属性的对象：

var formProps = {
    Name: "Some Name value",
    Age: "18", 
    AnotherField: "Some other value"
}

我正在尝试找到一种从属性创建表单的有效方法。

<div class="formitem">
<label>Some Name Value</label>
<input type="text" name="AnotherField" value="Some other value"/>
</div>

我无法决定是否应该生成HTML并将其转储到页面上已经存在的另一个div中，还是应该通过JS创建新的DOM元素...

Answer 1

如果希望它是动态的，别无选择，只能从JavaScript创建新的DOM元素。

一种方法是使用HTML模板定义表单项结构，这将使您可以在HTML中定义很多结构。然后，您可以为对象中的每个属性克隆，自定义此模板并将其附加到页面中。

const formProps = {
  Name: "Some Name value",
  Age: "18", 
  AnotherField: "Some other value"
}

function createField(prop, value) {
  const tpl = document.querySelector('#formitem-tpl');
  const clone = document.importNode(tpl.content, true);
  clone.querySelector('label').innerHTML = prop;
  const input = clone.querySelector('input');
  input.value = value;
  input.name = prop;
  return clone;
}

const form = document.querySelector('#form');

for (let [key, val] of Object.entries(formProps)) {
  form.appendChild(createField(key, val));
}

<template id="formitem-tpl">
  <div class="formitem">
    <label></label>
    <input type="text" name="" value=""/>
  </div>
</template>

<div id="form">
</div>

通过JavaScript对象属性创建表单

1 个答案: