javascript - 使用 JS 和 HTML 的 UI 差异

Question

在下面给出的链接中

https://jsfiddle.net/glkc93/675nb8yf/

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

我去开发者工具检查了最终代码，两者是一样的。为什么会观察到这种差异？？

附加代码: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>
  <button id="btnClr" class="button final">C</button>
  <button id="btnEql" class="button final">=</button>
  <button id="btnSum" class="button operation">+</button>
  <button id="btnSub" class="button operation">-</button>
  <button id="btnMul" class="button operation">*</button>
  <button id="btnDiv" class="button operation">/</button>
</div>

JS:

var result = document.createElement("div");
result.setAttribute('id', 'res');
result.setAttribute('class', 'result');
document.body.appendChild(result);

var btns = document.createElement("div");
btns.setAttribute('id', 'btns');
btns.setAttribute('class', 'container');

var btn1 = document.createElement("button");
btn1.setAttribute('id', 'btn1');
btn1.setAttribute('class', 'button number');
btn1.innerHTML = '1';

var btn0 = document.createElement("button");
btn0.setAttribute('id', 'btn0');
btn0.setAttribute('class', 'button number');
btn0.innerHTML = '0';

var btnClr = document.createElement("button");
btnClr.setAttribute('id', 'btnClr');
btnClr.setAttribute('class', 'button final');
btnClr.innerHTML = 'C';

var btnEql = document.createElement("button");
btnEql.setAttribute('id', 'btnEql');
btnEql.setAttribute('class', 'button final');
btnEql.innerHTML = '=';

var btnSum = document.createElement("button");
btnSum.setAttribute('id', 'btnSum');
btnSum.setAttribute('class', 'button operation');
btnSum.innerHTML = '+';

var btnSub = document.createElement("button");
btnSub.setAttribute('id', 'btnSub');
btnSub.setAttribute('class', 'button operation');
btnSub.innerHTML = '-';

var btnMul = document.createElement("button");
btnMul.setAttribute('id', 'btnMul');
btnMul.setAttribute('class', 'button operation');
btnMul.innerHTML = '*';

var btnDiv = document.createElement("button");
btnDiv.setAttribute('id', 'btnDiv');
btnDiv.setAttribute('class', 'button operation');
btnDiv.innerHTML = '/';

btns.appendChild(btn0);
btns.appendChild(btn1);
btns.appendChild(btnClr);
btns.appendChild(btnEql);
btns.appendChild(btnSum);
btns.appendChild(btnSub);
btns.appendChild(btnMul);
btns.appendChild(btnDiv);

document.body.appendChild(btns);

CSS:

.container {
  width: 90%
}

.result {
  width: 81%;
  height: 48px;
  font-size: 20px;
  border: solid;
  background-color: lightgray;
}

.button {
  width: 22%;
  height: 36px;
  font-size: 18px;
}

.number {
  background-color: lightgreen;
  color: brown;
}

.final {
  background-color: darkgreen;
  color: white;
}

.operation {
  background-color: black;
  color: red;
}

Answer 1

这是因为在加载为 Html 时，它添加了一些额外的字符作为文本节点。这是因为您在 html 中使用了缩进。

但是通过 JS 插入节点时不会发生这种情况。通过 Js，您不会添加任何文本节点，因此中间看不到间距

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

尝试使用 minifier 缩小或删除缩进，如下所示

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