如何在单击按钮时使用jquery将子div附加到父div中

时间:2016-06-10 14:11:28

标签: javascript jquery

<div class="addMore">
      <div class="row addPlus">
          <p class="emergencyTitle">Child 1</p>
          <div class="col-xs-6">
              <form role="form">
                  <div class="form-group">
                      <label for="name">Student Name</label>
                      <input type="text" class="form-control" name="ch1_name">
                  </div>
                  <div class="form-group">
                      <label for="name">Class</label><br>
                      <select name="ch1_class">
                          <option value=""> 1  </option>
                          <option value=""> 2</option>
                          <option value="">  3 </option>
                      </select>
                  </div>

              </form>
          </div>
          <div class="col-xs-6">
              <form role="form">
                  <div class="form-group">
                      <label for="name">DOB</label>
                      <input type="text" class="form-control" name="ch1_dob" id="datepicker">
                  </div>
                  <div class="form-group">
                      <label for="name">Section</label><br>
                      <select name="ch1_secion">
                          <option value=""> A </option>
                          <option value=""> B </option>
                          <option value=""> C </option>
                      </select>
                  </div>
              </form>
          </div>
      </div>
  </div>

点击按钮我正在做这个..

$child = $('.addPlus')
$('.addMore').append($child)

但我似乎无法添加addPlus div,$('.addMore').append("hi")如何正常工作。任何人都可以帮我解决我的错误。

2 个答案:

答案 0 :(得分:2)

如果要克隆项目 - 可以使用

$('.addPlus').first().clone().appendTo('.addMore')

答案 1 :(得分:0)

.addPlus已附加到.addMore,因此您的jQuery可以正常工作但不起作用。

假设您要复制.addPlus的现有实例,您应该先将clone()调用它,然后再将其附加到父级,如下所示:

var $newChild = $('.addPlus').first().clone()
$('.addMore').append($newChild)