How to move a div to the last child in an element with multiple elements?

Question

How do you move an element to the last child?

<div class="mail-email-block">
  <div class="email-raw">
    <div class="single-data-item">
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
    </div>
    <div class="single-data-item">
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
    </div>
  </div>
  <div class="email-block">
    stuff
  </div>
</div>
<div class="mail-email-block">
  <div class="email-raw">
    <div class="single-data-item">
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
    </div>
  </div>
  <div class="email-block">
    stuff
  </div>
</div>

I'm trying to find a way to move .email-block to the inside of the last child of .single-data-item for each element. I've been having problems that take all of '.email-block` and moves them to the first element. Something that looks like this:

<div class="email-raw">
   <div class="single-data-item">
     <div class="line_wrap"></div>
     <div class="line_wrap"></div>
     <div class="line_wrap"></div>
     <div class="email-block"></div>
   </div>
</div>

Answer 1

I think just appendChild() will solve your problem.

const singleDataItem = document.querySelector(".single-data-item"); //get the .single-data-item element
const emailBlock = document.querySelector(".email-block"); //get the .email-block element
singleDataItem.appendChild(emailBlock);

Answer 2

Do you want something like this?

let emailBlock = $('.email-block').detach();
$('.single-data-item .line_wrap').last().append(emailBlock);

Answer 3

You can try the following way using .each() and .appendTo() :

 $('.mail-email-block').each(function(){ $(this).find('.email-block').appendTo($(this).find('.single-data-item')); });

 .email-raw, .single-data-item{ border: 1px solid gray; margin: 10px; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mail-email-block"> <div class="email-raw"> <div class="single-data-item"> <div class="line_wrap">11</div> <div class="line_wrap">11</div> <div class="line_wrap">11</div> </div> <div class="single-data-item"> <div class="line_wrap">22</div> <div class="line_wrap">22</div> <div class="line_wrap">22</div> </div> </div> <div class="email-block"> stuff 1 </div> </div> <div class="mail-email-block"> <div class="email-raw"> <div class="single-data-item"> <div class="line_wrap">33</div> <div class="line_wrap">33</div> <div class="line_wrap">33</div> </div> </div> <div class="email-block"> stuff 2 </div> </div>