Difference in UI using JS and HTML

Question

In this link given below

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

Spaces are characters in HTML, the spaces you have for your new line/indentations count as "text nodes" and have a small visual representation, which you see as the spaces between the buttons. In Javascript when using appendChild, there are no extra spaces between elements as there are in the HTML and thus the buttons will not have spaces between them. If you were to re-format your HTML so all of the buttons were on a single line with no spaces between the start & closing tags, you would get the same effect. — skyline3000
– skyline3000, Commented Mar 10, 2016 at 19:02

Prasanna Rkv · Accepted Answer · 2016-03-10 16:35:34Z

2

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>

answered Mar 10, 2016 at 16:35

Prasanna Rkv

4294 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ken Schumack · Accepted Answer · 2016-03-10 18:58:09Z

1

Some day text-space-collapse: discard; may work ... but in the mean time you can just add a negative spacing to your css container for the buttons.

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

Be careful though. This would be not be appropriate if your container contains meaningful space. You also may want to add:

letter-spacing: normal;

to your child containers like .button so the text there would not be messed with.

Note: I tested with your jsfiddle and it seems to work.

edited Mar 10, 2016 at 18:58

answered Mar 10, 2016 at 18:46

Ken Schumack

7194 silver badges11 bronze badges

Collectives™ on Stack Overflow

Difference in UI using JS and HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related