Append DIV (specified by class) inside other DIV (specified by other class)

Question

I have HTML sheets "A" and "B". (HTML sheet "B" is read into html sheet "A". "A" works as a "template" for the very varying content in "B".)

I have this div in HTML sheet "A".

 <div class="productsheet-container">
 </div>

I add this div to HTML sheet "B":

<div class="productsheet">
          hello
</div>

This is my required outcome:

 <div class="productsheet-container">
      <div class="productsheet">
              hello
      </div>
 </div>

The div class="productsheet" should be hidden from its original position. So only be visible inside div class="productsheet-container".

If anyone could help me here, I'd be forever grateful! What JavaScript do I use exactly? Note! I'm a COMPLETE NEWB to JavaScript, haven't written one single line in my life! So, to me, the answers I've found googling seem insufficient.

I've, for example, tried:

$( ".productsheet-container" ).append( $( "<div class='productsheet' />" ) );

But shouldn't I write something before and/or after too?

Answer 1

You could solve this with just CSS:

.productsheet{
    display:none;
}
.productsheet-container .productsheet{
    display:block;
}

Demo here

To do the second part you can use this:

$(".productsheet-container").append($('.productsheet'));

Demo here