Javascript 使用JS和HTML的UI的差异

在下面给出的链接中

我分别使用HTML和JS代码创建了一个UI设计。但我观察到输出有点不同， -HTML代码输出的按钮之间有空格 -由JS代码输出，不需要

我去开发工具检查最终的代码，两者都是相同的。 为什么观察到这种差异

附件代码： HTML:

CSS:

---

这是因为当加载为Html时，它会添加一些额外的字符作为textNodes。 这是因为您在html中给出了缩进

但在通过JS插入节点时，这不会发生。 通过Js，您不会添加任何textNodes，因此中间没有间距

<div id="res" class="result"></div>
<div id="btns" class="container">
  <button id="btn0" class="button number">0</button>
  <button id="btn1" class="button number">1</button>

0
1.

尝试使用minifier提供minified或删除InEndation，如下所示

<div id="res" class="result"></div><div id="btns" class="container"><button id="btn0" class="button number">0</button><button id="btn1" class="button number">1</button>

01

某一天文本空间折叠：放弃；可能有用。。。但与此同时，您可以在css容器中为按钮添加一个负间距

.container {
  letter-spacing: -0.25em;
  width: 90%;
}

不过要小心。如果您的容器包含有意义的空间，那么这将是不合适的。您还可能需要添加：

letter-spacing: normal;

您的子容器如.button，这样文本就不会被弄乱

---

注意：我用您的JSFIDLE进行了测试，它似乎有效。

空格是HTML中的字符，用于新行/缩进的空格算作“文本节点”，并且有一个小的视觉表示，您可以将其视为按钮之间的空格。在Javascript中，当使用

appendChild

时，元素之间没有HTML中的额外空格，因此按钮之间没有空格。如果要重新格式化HTML，使所有按钮都在一行上，在开始和结束标记之间没有空格，则会得到相同的效果。

<div id="res" class="result"></div><div id="btns" class="container"><button id="btn0" class="button number">0</button><button id="btn1" class="button number">1</button>

.container {
  letter-spacing: -0.25em;
  width: 90%;
}

letter-spacing: normal;