Unsorted List inside a unsorted list created with DOM
<p>So I have creted an UL list with Javascript, but the hierarchy wont get right... And I really dont know how to embeed dem with each other...</p>

<p>This is the look Im strungling for.</p>

<pre><code>&lt;div class="dice-toolbar-wrapper"&gt;
&lt;ul&gt;
&lt;li class="add"&gt;&lt;/li&gt;
&lt;li class="remove"&gt;&lt;/li&gt;
 &lt;li class="roll"&gt;&lt;/li&gt;
 &lt;li&gt;
 &lt;ul class="dice-toolbar-counter-wrapper"&gt;
 &lt;li class="zero"&gt;&lt;/li&gt;
 &lt;li class="zero"&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
</code></pre>

<p>This is how I create the list.</p>

<pre><code>  dice_toolbar_wrapper_close = createElementWithClass('div', 'dice-toolbar-wrapper');
    outerDiv.appendChild(dice_toolbar_wrapper_close);
    document.getElementById("page-content-wrapper");

     add_remove_roll = createElementWithOutClass('ul');
    dice_toolbar_wrapper_close.appendChild(add_remove_roll);
    document.getElementById("dice-content-wrapper");
</code></pre>

<p>But this is what I get after rendering the page.</p>

<pre><code>&lt;div class="dice-toolbar-wrapper"&gt;
&lt;ul&gt;
&lt;li class="add"&gt;&lt;/li&gt;
&lt;li class="remove"&gt;&lt;/li&gt;
&lt;li class="roll"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="dice-toolbar-counter-wrapper"&gt;
&lt;li class="zero"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Any tips on how i can change the li tags ?</p>

<p>Thanks</p>
