在其他DIV中添加DIV（由类指定）（由其他类指定）

Question

我有HTML表“A”和“B”。 （HTML表格“B”被读入html表格“A”。“A”作为“B”中变化内容的“模板”。）

我在HTML表单“A”中有div。

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

我将此div添加到HTML表单“B”：

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

这是必需结果：

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

div class="productsheet"应隐藏其原始位置。所以只能在div class="productsheet-container"内看到。

如果有人能在这里帮助我，我将永远感激不尽！ 我使用什么JavaScript 完全？注意！我是JavaScript的 COMPLETE NEWB ，在我的生活中没有写过一行！所以，对我来说，我发现谷歌搜索的答案似乎不够。

例如，我尝试过：

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

但我不应该在之前和/或之后写点什么吗？

Answer 1

使用此：

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

.append() documentation

WORKING FIDDLE

我建议你先学习普通的javascript，然后再学习jQuery。

Answer 2

你可以用CSS解决这个问题：

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

演示here

要做第二部分，你可以使用它：

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

演示here

Answer 3

使用div

创建style="display:none"作为模板并从视图中隐藏

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

在您的Javascript中，克隆模板，设置display:block并在需要时附加到.productsheet-container。

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