動態生成多個元素

Question

我正在嘗試使用JavaScript來根據用戶輸入生成一定數量的輸入框。但是，當我使用for循環時，它只生成一個輸入框並在所述輸入框中追加一定的時間。

function generateAttributes(){ 
    var y = 1; 
    var mAttributes = document.getElementById('numAttributes').value; 
    var parent = document.getElementsByTagName('div')[17]; 
    var inputBox = document.createElement('input'); 
    inputBox.setAttribute('class', 'form-control'); 
    for(var i = 0; i < mAttributes; i++){ 
     inputBox.setAttribute('id', y); 
     inputBox.setAttribute('placeholder', 'Attribute ' + y); 
     parent.appendChild(inputBox); 
     y++; 
    } 

}

Answer 1

你需要爲每個循環迭代創建一個新元素。

移動循環內的以下內容：

var inputBox = document.createElement('input'); 
    inputBox.setAttribute('class', 'form-control'); 

結果：

for(var i = 0; i < mAttributes; i++){ 

    var inputBox = document.createElement('input'); 
    inputBox.setAttribute('class', 'form-control'); 
    inputBox.setAttribute('id', y); 
    inputBox.setAttribute('placeholder', 'Attribute ' + y); 
    parent.appendChild(inputBox); 
    y++; 
} 

您當前正在創建只有一個元素和修改，並在追加相同的元素，在