javascript - 在 Bootstrap 表单中单击添加行

Question

我的代码工作正常，但标签位置不正确。单击时，第一个标签不在正确位置，但其他标签位于正确位置。

我哪里做错了？

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />
<form>
    <div class="form-group">
        <label class="col-lg-3 control-label">Field:1</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="field1" />
        </div>
    </div>
    <script type="text/javascript">
    var info = 1;
    function add_fields() {
        info++;
        var objTo = document.getElementsByClassName('form-group')[0]
        var divtest = document.createElement("div");
        divtest.innerHTML = '<div class="form-group"><label class="col-lg-3     
        control-label">Field'+info+'</label><div class="col-lg-5"> <input   
        type="text" class="form-control" name="field1" /></div></div>';
        objTo.appendChild(divtest)
    }
    </script>
    <div class="form-group">
        <div class="col-lg-9 col-lg-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Answer 1

该行被附加到错误的位置。尝试:

<div id="additionalFields"></div>

您想要新字段的位置，然后更改

var objTo = document.getElementsByClassName('form-group')[0]

至

var objTo = document.getElementById('additionalFields');

这应该可以纠正对齐方式。