Why adding new span make space between new span and previous ones and how to avoid this-CodePudding

So basically it makes "a b=c". But I want to make "a b=c".

HTML:

<div >
   <span id="b__value"> b</span>
   <span id="c__value">=c</span>
</div>

JS:

const vlaueContainer = document.getElementsByClassName('timer__value')[0];
let newSpan = document.createElement('span');

newSpan.id = 'testId';
newSpan.innerHTML  = "77";
valueContainer.insertBefore(newSpan, valueContainer.firstChild);

CodePudding user response：

Generally, Inline Elements in HTML when used in different lines, (just as you did), are rendered on the page with a blank space between the elements. If you want the output as expected, put the two elements in a single line, and not in different lines.

<div >
   <span id="b__value"> b</span><span id="c__value">=c</span>
</div>