在由JavaScript创建的ul和li元素之间添加空格

Question

Been struggling with a problem now.

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.

something like this.

<div class="clock-content-wrapper"><ul class="clock-digit-wrapper hour"><li class="clock-digit-one"></li><li class="clock-digit-three"></li></ul><ul class="clock-digit-wrapper minute"><li class="clock-digit-three"></li><li class="clock-digit-seven"></li></ul><ul class="clock-digit-wrapper second"><li class="clock-digit-zero"></li><li class="clock-digit-zero"></li></ul></div>

There is no spaces between the elements.

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

<div class="clock-content-wrapper">
<ul class="clock-digit-wrapper hour">
<li class="clock-digit-one"></li>
<li class="clock-digit-three"></li>
</ul>
<ul class="clock-digit-wrapper minute">
<li class="clock-digit-three"></li>
<li class="clock-digit-seven"></li>
</ul>
<ul class="clock-digit-wrapper second">
<li class="clock-digit-zero"></li>
<li class="clock-digit-zero"></li>
</ul>
</div>

And notice that if i have the </ul> element under my </li> the script actually works at it supposed to.

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. http://jsfiddle.net/Xk49c/

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

Answer 1

Your <ul> elements are displayed as inline-block in your fiddle. I suspect they are suffering from this little-known feature of inline-block .

Answer 2

The problem is, when you create the elements using HTML, you indent or separate the elements with one or more spaces, or even new lines. HTML renders these spaces as ONE single space and so you see the space between those elements.

To add spaces between elements created by JavaScript, either you ll have to add a padding left to minute and second class, or insert a text node between each UL

hours = createElementWithClass('ul', 'clock-digit-wrapper hour');
clock_toolbar_wrapper_close.appendChild(hours);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // Add this


minutes = createElementWithClass('ul', 'clock-digit-wrapper minute');
clock_toolbar_wrapper_close.appendChild(minutes);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // And this