Quickly building out a set of elements in query?
<p>Is there a way to quickly build out a set of elements in jQuery? I know I can <code>$('&lt;div&gt;').addClass('name');</code> a ton of times with <code>.append()</code> to create something like the example bellow but I was wondering if there is a better way to do it.</p>

<pre><code>&lt;div class="navBox"&gt;
    &lt;div class="topLeft"&gt;&lt;/div&gt;
    &lt;div class="topRight"&gt;&lt;/div&gt;
    &lt;div class="bottomLeft"&gt;&lt;/div&gt;
    &lt;div class="bottomRight"&gt;&lt;/div&gt;
    &lt;div class="hBar"&gt;
        &lt;div class="leftTab"&gt;&lt;/div&gt;
        &lt;div class="rightTab"&gt;&lt;/div&gt;
        &lt;div class="buttonLeft"&gt;
            &lt;div class="leftArrow"&gt;&lt;/div&gt;
            &lt;div class="leftBar"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="buttonRight"&gt;
            &lt;div class="rightArrow"&gt;&lt;/div&gt;
            &lt;div class="rightBar"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="vBar"&gt;
        &lt;div class="topTab"&gt;&lt;/div&gt;
        &lt;div class="bottomTab"&gt;&lt;/div&gt;
        &lt;div class="centerTab"&gt;&lt;/div&gt;
        &lt;div class="buttonTop"&gt;
            &lt;div class="topBar"&gt;&lt;/div&gt;
            &lt;div class="topArrow"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="buttonBottom"&gt;
            &lt;div class="bottomArrow"&gt;&lt;/div&gt;
            &lt;div class="bottomBar"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Update:</strong> I know I can brute force create it, I was hoping for something like jQuery building it for me based on a mark up like <a href="http://code.google.com/p/zen-coding/" rel="nofollow">Zen-Coding</a> or some such thing. I hoping to not have to include the block of HTML in code.</p>
