使用 InnerHTML 时出现空字符问题

Question

我使用下面的代码创建 DOM 内部 HTML：

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

我在结果中发现了有关空格（空字符）的问题，如下图所示：

怎么了？如果我删除标签

b

或

sup

，空白间距将被删除，但这不是我想要的结果。

我想要的就是这样的

B 8384 UCR
移动 - 84 Kph - 25^o
2024年9月24日 20:38:32

不是：

....B 8384 UCR
移动 - 84 Kph - 25 ^o
2024年9月24日 20:38:32

也不是：

B 8384 加州大学河滨分校
移动 - 84 Kph - 25o
2024年9月24日 20:38:32

PS：

我尝试像这样添加

"span"

：

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

结果如下：

Answer 1

通过添加“span”标签解决了问题。 看我的身体问题