這是我的內容：var config = { first: { value: 'example', type: 'text', label: 'Name' }, second: { value: 'some', type: 'text', label: 'Family' }};有什么想法可以根據第一個和第二個進行 2 個輸入嗎？我需要用這個方法創建這個字段：document.createElement('input'); //eg根據我的配置，使用 javascript 制作兩個輸入 html 字段。
2 回答
侃侃爾雅
TA貢獻1801條經驗 獲得超16個贊
一種解決方案是交互所有對象屬性并為每個屬性創建一個標簽和輸入，然后將其附加到 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/
Helenr
TA貢獻1780條經驗 獲得超4個贊
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);
});
- 2 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消