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

Answer 2

USE this:

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

.append() documentation

WORKING FIDDLE

I would suggest you to learn plain javascript first,and then get on jQuery.

Answer 3

Create the div as template and hidden from view using style="display:none"

<div id="template" class="productsheet-container" style="display:none">
   hello
 </div>

In your Javascript, clone the template, set display:block and append to .productsheet-container whenever you need.

$( ".productsheet-container" ).append( $("#template").clone().css("display","block" ));