在由JavaScript創建的ul和li元素之間添加空格

Question

現在一直在努力解決問題。

我有一個行為異常奇怪的列表，直到我縱火調試它並看到整個文件都在一行中打印出來之后，才發現問題。

這樣的事情。

<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>

元素之間沒有空格。

現在我不知道這可能是個問題，所以我開始像這樣修復螢火蟲中的元素。

<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>

並請注意，如果我在</li>下有</ul>元素，則腳本實際上應該可以正常工作。

有沒有辦法用javascript結構文件？ 我有一個jsFiddle，您可以在其中區分以HTML創建的樹和具有JavaScript的樹之間的區別。 http://jsfiddle.net/Xk49c/

我真的不想更改CSS中的任何內容。 因為html和js應用程序都使用相同的css。

Answer 1

您的<ul>元素在小提琴中顯示為行inline-block 。 我懷疑他們正在遭受這種inline-block鮮為人知的功能 。

Answer 2

問題是，當您使用HTML創建元素時，需要用一個或多個空格，甚至換行來縮進或分隔元素。 HTML將這些空間呈現為一個單一的空間，因此您可以看到這些元素之間的空間。

要在JavaScript創建的元素之間添加空格，您將不得不在minute和second類上添加一個填充，或者在每個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