How to append child div into a parent div using jquery on the click of a button

Question

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

On the click of a button I am doing this ..

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

But I cannot seem to add the addPlus div, how over $('.addMore').append("hi") works fine. Can anyone help me out where I am going wrong.

Foker · Accepted Answer · 2016-06-10 14:14:35Z

2

if you want to clone the item - you can use

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

answered Jun 10, 2016 at 14:14

Foker

1,0113 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2016-06-10 19:55:12Z

0

.addPlus is already appended to .addMore, so your jQuery would work but have no effect.

Assuming you want to copy the existing instance of .addPlus you should call clone() on it before appending it to the parent, like this:

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

edited Jun 10, 2016 at 19:55

answered Jun 10, 2016 at 14:14

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Collectives™ on Stack Overflow

How to append child div into a parent div using jquery on the click of a button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related