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?

I don't really get the problem this is supposed to solve. What feature are you trying to implement? — FloydThreepwood, Sep 08 '13 at 10:13

HIRA THAKUR · Answer 1 · 2013-09-08T10:08:49.193

0

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.

edited Sep 08 '13 at 10:08

answered Sep 08 '13 at 10:01

HIRA THAKUR

17,189
14
56
87

@user2758614:its pretty simple,and to add css you can give style in css file or inline...but as mentioned learn javascript first,all good developers do that!! – HIRA THAKUR Sep 08 '13 at 10:15
Thank you, Opus, I won't happen though. Should one of these lines be sufficient on its own just like that? I guess your right about learning javascript :) – Frida Sep 08 '13 at 10:16
Opus, thank you for the fiddle! But I'm not creating the div content in the javascript. The content in the "div productsheet" will be collected from the html sheet "B" and will vary for differnt products (using the code in a shop). – Frida Sep 08 '13 at 10:20
@Frida:yes i know,but from your question it appeared as if you were trying to do it with jquery..its good if you can solve it with css itself..but this is also an elegant solution.. – HIRA THAKUR Sep 08 '13 at 10:24
Opus, my problem is not solved...i can't solve it with only CSS. The CSS only solves the hide/show issue. But collecting the content from "B" and place it in a certain spot in "A", is still a mystery. Your snippet seems to create a div inside "productsheet-container", but not moving the div "productsheet" from one spot to another. Any further clues? :) – Frida Sep 08 '13 at 10:31
Look,this is what its is doing..Dont add any markup for the inner div...jquery will create a div and place it in a certain spot in a div...dont worry about that..just get rid of the div in html ..add it by jquery and style it the way you want it to...simple..and dont accept your answers untill your problems are solved.. – HIRA THAKUR Sep 08 '13 at 10:35
I see, it's just that i need to use this as a template. Thats why i cant put exact content into the javascript, cause this code will be read by different products with different actual referring productsheets. – Frida Sep 08 '13 at 10:44
@Frida:look,dont overcompllicate things...what you have done uptill now is correct...just include one more line ..the above line...thats it..i have understood what you want...its pretty clear from your question..and feel free to tick this answer as correct if you think it helped – HIRA THAKUR Sep 08 '13 at 11:08
Outmost grateful for your efforts. Sergio's updated answer did the trick! :) – Frida Sep 08 '13 at 11:28

Sergio · Accepted Answer · 2013-09-08T10:47:01.680

0

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

edited Sep 08 '13 at 10:47

answered Sep 08 '13 at 10:04

Sergio

28,539
11
85
132

Thank you Sergio, I will use your CSS in combination with a jQuery solution. The productsheet still needs to appear in its right place first. :) – Frida Sep 08 '13 at 10:13
@Frida, just updated my answer with the second part you need. – Sergio Sep 08 '13 at 10:47
@Frida, fick du till den? – Sergio Sep 08 '13 at 10:50
@Frida ;) bra! glad I could help – Sergio Sep 08 '13 at 10:53

score 0 · Answer 3 · answered Sep 08 '13 at 10:12

0

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" ));

answered Sep 08 '13 at 10:12

Khanh TO

48,509
13
99
115

This seem to answer whet I need, but I can't exactly get it to work. Would you mind showing me with a jsfiddle? :) – Frida Sep 08 '13 at 10:47

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

3 Answers3

Demo here