Empty Character issue when using InnerHTML

I create DOM Inner HTML with this code below:

var popupVhc1 = L.DomUtil.create('div', 'popup-vhcmap');
tablepopupVhc1 = L.DomUtil.create('table','table table-infopopup',popupVhc1);
trpopupVhc1 = L.DomUtil.create('tr','',tablepopupVhc1);
tdiconpopupVhc1 = L.DomUtil.create('td','col-1 align-midle bg-popup-gre',trpopupVhc1);
infoiconpopupVhc1 = L.DomUtil.create('i','bi bi-car-front-fill text-icon-popup',tdiconpopupVhc1);
tdcontentpopupVhc1 = L.DomUtil.create('td','col-6 td-content-popup',trpopupVhc1);

tdcontentpopupVhc1.innerHTML += '<b>B 8384 UCR</b><br>';
tdcontentpopupVhc1.innerHTML += 'Moving - 84 Kph - 25<sup>o</sup><br>';
tdcontentpopupVhc1.innerHTML += '24-09-2024 20:38:32';

div.popup-vhcmap {
  font-size: 0.75rem;
  width: 200px;
  height: 80px;
  box-shadow: 0 0 1px 1px #6d6d6d;
  border-radius: 3px;
  text-align: center;
}

table.table-infopopup {
  height: 100%;
  width: 99%;
}

td.bg-popup-gre {
  background-color: #03b420;
  text-align: center;
}

td.td-content-popup {
  background-color: #fff;
  text-align: left;
  padding-left: 5px;
  line-height: 1.5;
}

i.text-icon-popup {
  font-weight: bold;
  color: #fff;
}

I have found issue about spacing (empty character) in my result as picture below:

What’s wrong? If I remove tag b or sup, empty spacing will be removed, but this isn’t the result that I want.

What I want is like this

B 8384 UCR
Moving- 84 Kph – 25^o
24-09-2024 20:38:32

not:

….B 8384 UCR
Moving- 84 Kph – 25 ^o
24-09-2024 20:38:32

also not:

B 8384 UCR
Moving- 84 Kph – 25o
24-09-2024 20:38:32

PS:

I tried with add "span" like this:

tdcontentpopupVhc1.innerHTML += '<span><b>B 8384 UCR</b></span><br>';
tdcontentpopupVhc1.innerHTML += '<span>Moving - 84 Kph - 25<sup>o</sup></span><br>';
tdcontentpopupVhc1.innerHTML += '<span>24-09-2024 20:38:32</span>'

and the result is below:

You need to sign in to view this answers