Add a space between ul and li element created by JavaScript
<p>Been struggling with a problem now.</p>

<p>I have a list that behaves quite weird, and couldt find the problem until i firebugd it and saw that the entire file prints out in one row.</p>

<p>something like this.</p>

<pre><code>&lt;div class="clock-content-wrapper"&gt;&lt;ul class="clock-digit-wrapper hour"&gt;&lt;li class="clock-digit-one"&gt;&lt;/li&gt;&lt;li class="clock-digit-three"&gt;&lt;/li&gt;&lt;/ul&gt;&lt;ul class="clock-digit-wrapper minute"&gt;&lt;li class="clock-digit-three"&gt;&lt;/li&gt;&lt;li class="clock-digit-seven"&gt;&lt;/li&gt;&lt;/ul&gt;&lt;ul class="clock-digit-wrapper second"&gt;&lt;li class="clock-digit-zero"&gt;&lt;/li&gt;&lt;li class="clock-digit-zero"&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
</code></pre>

<p>There is no spaces between the elements.</p>

<p>Now i didn't know that could be a problem so i started to fix the elements in firebug like this.</p>

<pre><code>&lt;div class="clock-content-wrapper"&gt;
&lt;ul class="clock-digit-wrapper hour"&gt;
&lt;li class="clock-digit-one"&gt;&lt;/li&gt;
&lt;li class="clock-digit-three"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="clock-digit-wrapper minute"&gt;
&lt;li class="clock-digit-three"&gt;&lt;/li&gt;
&lt;li class="clock-digit-seven"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="clock-digit-wrapper second"&gt;
&lt;li class="clock-digit-zero"&gt;&lt;/li&gt;
&lt;li class="clock-digit-zero"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>And notice that if i have the <code>&lt;/ul&gt;</code> element under my <code>&lt;/li&gt;</code> the script actually works at it supposed to.</p>

<p>Is there a way to structure the file with javascript ?
I have a jsFiddle, where you can se the differens between the tree created in HTML and the one with JavaScript. 
<a href="http://jsfiddle.net/Xk49c/" rel="nofollow">http://jsfiddle.net/Xk49c/</a></p>

<p>I really dont want to change anything in the css . since both html and js application is using the same css .</p>
