使用Javascript添加標籤和Div內部AppendChild

Question

我正在嘗試創建一個動態表單，其中用戶可以爲其他輸入添加更多字段。

當用戶點擊此按鈕：

<input style="font-size=12px; width:170px;" name="add" type="button" id="add" class='btn-style'/> 

的形式附加組將在該區域中顯示待：

<div id="collegediv"></div> 

使用此腳本：

document.getElementById('add').onclick = function() { 

    var collegediv = document.getElementById('collegediv'), 
    inputatt = "form-control input-sm", 
    firstdivatt = "form-group", 
    div = document.createElement('div'); 
    div.setAttribute("class","col-sm-5"); 
    var div2 = document.createElement('div'); 
    div2.setAttribute("class","form-group"); 
    var label = document.createElement('label'); 
    label.setAttribute("class","col-sm-3 control-label input-sm"); 

    var input = document.createElement('input'); 
    collegediv.setAttribute("class",firstdivatt); 
    input.type = "text"; 
    input.setAttribute("name", "college[]"); 
    input.setAttribute("placeholder","Name of College/University"); 
    input.setAttribute("class", inputatt); 

    div.appendChild(input); 
    div2.appendChild(label); 
    div2.appendChild(div); 
    collegediv.appendChild(div2); 

}; 

的流腳本是

• 附加一個textbox內div variable
• 附加一個label內div2 variable
• 附加一個div的div2 variable內也
• 然後追加div2的collegediv DIV

我還使用內在這個過程中引導，所以<div>的造型就是這樣。

我的問題是它沒有格式化我認爲應該輸出的方式。

輸出/ HTML應該是這樣的：

<div id="collegediv"> 
    <div class="form-group"> 
    <label for="college" class="col-sm-3 control-label input-sm"></label> 
    <div class="col-sm-5"> 
     <input type="text" name="college[]" class="form-control input-sm" placeholder="Name of College/University" required> 
    </div> 
    </div> 
</div> 

但這似乎並沒有被輸出。我的猜測是在div2內追加label和div是問題所在。這就像他們有衝突或覆蓋label與div一旦你將它追加div2內。誰能幫我這個。謝謝。

Answer 1

此輸出你說什麼你在輸出/ HTML想應該是這樣的：節

document.getElementById('add').onclick = function() { 

    var collegediv = document.getElementById('collegediv'); 

    // Make first div  
    var div_form_group = document.createElement('div'); 
     div_form_group.setAttribute("class","form-group"); 

    // Make label 
    var label = document.createElement('label'); 
     label.setAttribute('for','college') 
     label.setAttribute('class','col-sm-3 control-label input-sm'); 

    // Make inner div 
    var div_inner = document.createElement('div'); 
     div_inner.setAttribute('class','col-sm-5'); 

    // Make input 
    var input = document.createElement('input'); 
     input.type = 'text'; 
     input.setAttribute('name', 'college[]'); 
     input.setAttribute('class', 'form-control input-sm'); 
     input.setAttribute('placeholder','Name of College/University'); 
     input.setAttribute('required','required'); 

    // Attach elements 
    div_inner.appendChild(input); 
    div_form_group.appendChild(label); 
    div_form_group.appendChild(div_inner); 
    collegediv.appendChild(div_form_group); 

};