使用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); 

};