title: How to build "big" div structures in JavaScript (JQuery)?
body: <p>I need to make big DIV structures and append them to a wrapper.
  But what I've seen so far was always about appending <strong>one</strong> DIV element into another one.</p>
  
  <p>There is an empty DIV-Wrapper, to be filled with "big" DIV-Elements</p>
  
  <pre><code>&lt;div class="PostWrapper"&gt;
      // Content should be added to here
  &lt;/div&gt;
  </code></pre>
  
  <p>The DIV-Elements which I want to append to the <code>PostWrapper</code> look like this:</p>
  
  <pre><code>&lt;div class="Post"&gt;
      &lt;div class="PostHead"&gt;
           &lt;span class="profilePicture"&gt;
               &lt;img src="../Profiles/Tom.jpg" /&gt;
           &lt;/span&gt;
           &lt;span class="userName"&gt;Tom&lt;/span&gt;
           &lt;span class="postTime"&gt;10 minutes ago&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="PostBody"&gt;
          &lt;p&gt;Hey Tom, great work at the presentation last week. Well done!&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So this is an example of a DIV-Structure which I'd like to build and store in a javascript Variable and append to my wrapper like:</p>
  
  <pre><code>var postElement = $("div", {class: "Post"}).append("div", {class: "PostHead"}).append("div", {class: "PostBody"})......
  </code></pre>
  
  <p>This wont work like expected ofc. But I can't think of a simple way of doing this without having overly complexe code.</p>
  
  <p>How would that be possible?</p>