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

我一直在努力解决一个问题

我有一个行为非常奇怪的列表，在我对它进行FireBug测试并看到整个文件打印成一行之前，我无法找到问题

像这样的

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

/ul

元素之间没有空格

现在我不知道这可能是个问题，所以我开始像这样修复firebug中的元素

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

请注意，如果在我的

下有

元素，那么脚本实际上可以按预期的方式工作

有没有办法用javascript来构造文件？ 我有一个JSFIDLE，您可以在其中分析用HTML创建的树和用JavaScript创建的树之间的差异。

---

我真的不想改变css中的任何内容。因为html和js应用程序都使用相同的css。

您的

元素在您的小提琴中显示为

内联块。我怀疑他们受到了影响。
问题是，当您使用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

我看到你在我的另一个问题上发帖了，谢谢。我确实在UL之间偶然尝试了textNode，但结果是它像一个标记一样放下了类。所以图像被替换了。我没有看到你的帖子，只是评论而已。天啊。我用另一种方式创建textNode的工作原理可能是。。我很抱歉：）但是非常感谢你。