Difference in UI using JS and HTML

Question

In this link given below

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

I have created a UI design using HTML and JS code seperately. But i observed that the output is a little different, - output by HTML code has spaces between buttons - output by JS code do not.

I went to developer tools to check the final code and both are same. Why is this difference observed??

Attaching code: 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

This is because while loading as Html it adds Some Extra Characters as textNodes. this is because of the indentation you gave in the html.

But while inserting nodes via JS this won't happen. By Js you won't add any textNodes hence no spacing is seen inbetween

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

Try giving minified using minifier or remove indendation as shown below

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