0

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

HTML:

<div class="container">
   <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);
Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Dmitriy Shevchenko
  • 19
  • 3
  • 1
    maybe the problem is what the `a` element could you show where and how that element is placed on the page – Roe Nov 17 '22 at 14:37
  • 1
    `valueContainer.insertBefore(newSpan, valueContainer.firstElementChild);` [What is the difference between \`firstChild\` and \`firstElementChild\`?](https://stackoverflow.com/q/51280481) – 001 Nov 17 '22 at 14:45

1 Answers1

1

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 class="container">
   <span id="b__value">+b</span><span id="c__value">=c</span>
</div>
Satyam Mishra
  • 169
  • 1
  • 9