当其旁边的文本更改时，用作链接的图标显示错误

Question

第二个图像显示了页面加载时的图标，但是当我触发一个更改左侧文本的函数时，该图标看起来像第一个图像，带有下划线。我完全不知道为什么。当左侧的文本更改时，“ a”标记将从60 x 29更改为60.28 x 29，图标保持60x60。任何帮助表示赞赏。

<div class="title" id='title'>This text changes on click and it works fine
 <a href="https://icon.com" target=_blank>
   <img src="icon.svg" id='icon'>
 </a>
</div>  

#icon {
  fill: $mainColor;
  height: 2.5em;
  overflow: visible;
}  

function changeText(text) {
document.getElementById('title').firstChild.data = text
/*this is all my JS code, functio fires on button click*/

Answer 1

通过某种方式更改第一个子节点的数据，可使浏览器在链接内部包括链接之前的空间。

如果您将innerHTML登录到控制台，则会看到类似以下的内容：

之前：

M

更改文字后：

This text changes on click and it works fine
 <a href="#" target="_blank">
   <img src="https://via.placeholder.com/50" id="icon">
 </a>

（Chrome的示例输出。）

因此，该空格现在位于链接内部，并已应用lorem ipsum<a href="#" target="_blank"> <img src="https://via.placeholder.com/50" id="icon"> </a> -这是您在图像左侧看到的细线。

有趣的是，如果在文本末尾添加尾随空格，效果似乎消失了。

text-decoration: underline

---

我现在无法就此首先发生的原因给出完整，正确的解释-HTML有一些相当复杂的规则，特别是在元素内容的开头或结尾，DOM创建中如何处理空格。视情况而定，有时此类前导或尾随空白会“移出”一个元素，然后插入到元素外部，反之亦然。