CODEWITHSUNDEEP
jquery
Divern
Divern

Reputation: 363

How can I append a div into another by ussing "append to this"?

So, I have 3 different divs, each has an edit button. Currently, when you click the edit button the page scrolls all the way down. So, what I am trying to do is that when you click on edit, it appends the edit box below the edit button that is clicked.

So this is my code. 

<div class="sandbox" id="orange_sandbox">
   <span class="edit">Edit</span>

</div>
<div class="sandbox" id="blue_sandbox">
   <span class="edit">Edit</span>

</div>
<div class="sandbox" id="green_sandbox">
   <span class="edit">Edit</span>

</div>

<div class="kittens">
   The form will go here
</div>

<script>
   $('.edit').on('click', function(){
      $('.kittens').appendTo("this");  
   });
</script>

I can't get it to work. I don't think it should be appended to a parent because those divs are not related.

Upvotes: 0

Views: 17

Answers (2)

vijayP
vijayP

Reputation: 11502

You were very close. Just make small modification as $('.kittens').appendTo(this); to your code.

$(document).ready(function() {
  $('.edit').on('click', function() {
    $('.kittens').appendTo(this);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="sandbox" id="orange_sandbox">
  <span class="edit">Edit</span>

</div>
<div class="sandbox" id="blue_sandbox">
  <span class="edit">Edit</span>

</div>
<div class="sandbox" id="green_sandbox">
  <span class="edit">Edit</span>

</div>

<div class="kittens">
  The form will go here
</div>

Upvotes: 0

guradio
guradio

Reputation: 15555

$('.edit').on('click', function(){
      $(this).after($('.kittens'));  
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sandbox" id="orange_sandbox">
   <span class="edit">Edit</span>

</div>
<div class="sandbox" id="blue_sandbox">
   <span class="edit">Edit</span>

</div>
<div class="sandbox" id="green_sandbox">
   <span class="edit">Edit</span>

</div>

<div class="kittens">
   The form will go here
</div>

  1. Use this context.
  2. Use .after()

Description: Insert content, specified by the parameter, after each element in the set of matched elements.

Upvotes: 1

Related Questions