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

我在这个过程中也使用了bootstrap，因此<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>

但这似乎不是输出。我的猜测是label和div在div2内的附加是问题所在。就像label在div内附加div2一样，它们会发生冲突或覆盖{{1}}。谁能帮我这个。感谢。

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

};

使用Javascript AppendChild在Div中附加Label和Div

1 个答案: