js利用数组中的对象动态生成表单
时间: 2023-08-15 13:07:08 浏览: 99
可以通过遍历数组中的对象,根据对象的属性和值来动态生成表单元素。例如,假设数组中的对象如下:
```javascript
const arr = [
{ name: 'username', label: '用户名', type: 'text', required: true },
{ name: 'password', label: '密码', type: 'password', required: true },
{ name: 'email', label: '邮箱', type: 'email', required: false },
];
```
可以通过以下代码动态生成表单:
```javascript
const form = document.createElement('form');
arr.forEach((item) => {
const label = document.createElement('label');
label.innerText = item.label;
const input = document.createElement('input');
input.name = item.name;
input.type = item.type;
if (item.required) {
input.required = true;
}
form.appendChild(label);
form.appendChild(input);
});
document.body.appendChild(form);
```
这段代码会在页面中生成一个包含输入框和标签的表单,其中输入框的属性根据数组中的对象动态生成。