javascript - 向 DOM 注入的 html 代码出现意外失真

Question

我认为这是一个奇怪的问题......也许是另一个错误！

innerHTML我通过这样的 div插入 html ：

const verbs = ['leave', 'left', 'left'];
const insertion = `${getSpans()}`;
const elem = document.getElementById("container");
elem.innerHTML = insertion;

function getSpans() {
    let result = '';
  for(let i = 0; i < verbs.length; i++) {
    const verb = verbs[i];
    if(i === 0){ 
      result += `<tspan id="span1">${verb.trim()}</tspan>`; 
      result += '<tspan fill="#fcba03"> - </tspan>';
    } else if(i === 1) {
      result += `<tspan id="span2">${verb.trim()}</tspan>`; 
      result += '<tspan fill="#fcba03"> - </tspan>';
    } else {
      result += `<tspan id="span3">${verb.trim()}</tspan>`
    }
  }
  return result;
}

<div id="container"></div>

在这里一切正常，正如您所见，动词之间的连字符似乎被每个单词之间的单个空格隔开。

我在我的代码中做了完全相同的事情（我无法在此处重现它，因为它由多个文件等组成）但第一个连字符似乎附加到leave动词！！！leave我的意思是动词后面没有空格...

这是我所说的证明：

奇怪的是，尽管我 100% 确定插入字符串innerHTML是正确的（您可以在控制台中看到上图中的跨度），但问题还是发生了。

此外，如果我在页面中进行更新，例如放大或缩小，一切都会得到修复！

我错过了什么以及如何解决这个问题？任何意见将不胜感激...

标签： javascripthtmlcss