在引导表单中单击时添加行

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

这应该会更正对齐方式。

Answer 2

问题在于您的引导栏。

<form>

  <div class="form-group ">
   <label class="col-lg-3 control-label">Field:1</label>
    <div class="col-lg-9">
     <input type="text" class="form-control" name="field1" />
   </div>
  </div>
 <div class="form-group">
   <div class="col-lg-9 col-lg-offset-3">
   <button type="submit" class="btn btn-primary">Submit</button>
  </div>
  </div>  

    <script type="text/javascript">
         var info = 1;
    function add_fields() {
    info++;
    var objTo = document.getElementsByClassName('form-group')[0]
    console.log(objTo);

       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-9"> <input type="text"         class="form-control" name="field1" /></div></div>';

     objTo.appendChild(divtest)
     }

您可以将其作为参考。希望对您有所帮助。