在 DOM 中呈现插入元素时缺少空格

Question

我从第三方供应商的平台上得到了一些非常奇怪的行为。我有字符串形式的 HTML 内容，我正在尝试用从该字符串创建的 HTML 元素替换 DOM 中的 HTML 元素或节点（不太关心哪个）。无论采用哪种方式，元素/节点的内容在我将其放入 DOM 后都会发生变化。这是一些小东西，比如缺少空格（常规的和不间断的）。事实上，它可能完全缺少空格......

下面我包含了我尝试放入 DOM 的示例以及我要输出的内容。

插入前：

<span style="font-size: 12px;">Si tiene alguna pregunta sobre la información provista, llame a <strong>la sala de partos</strong>, al teléfono <strong><span style="color: rgb(149, 55, 52);">[phone]</span></strong>.</span>

在 DOM 中：

<span style="font-size: 12px;">Si tiene alguna pregunta sobre la información provista, llame a<strong>la sala de partos</strong>, al teléfono<strong><span style="color: rgb(149, 55, 52);">[phone]</span></strong>.</span>

如果你仔细观察，每个 STRONG 标签前都少了一个空格。它似乎也在删除 STRONG 标签后的空格（不包括在上面提供的示例中）。我不明白！它发生在 Chrome、Edge 和 Firefox 中。它与我将 HTML 字符串转换为 HTML 元素的方式有关吗？但就是这样，HTML 元素（或节点）在插入 DOM 之前包含空格，但在插入 DOM 之后不包含空格。

我对向所有 STRONG 标签添加 CSS 边距只有一步之遥（急于求成？），但如果可能的话，我更愿意以“正确的方式”做事。有谁知道我丢失的空间去了哪里？

我已经尝试将目标元素的 outerHTML 设置为等于 htmlText。我试过实例化 htmlText，然后在目标的父级中执行 replaceChild。我什至尝试创建一个包装器，实例化 htmlText，然后用实例化元素的 innerHTML 替换目标的 innerHTML。

target.outerHTML = htmlText;

let wrapper = document.createElement("DIV");
wrapper.innerHTML = htmlText;
let newElement = wrapper.firstChild;
target.parentNode.replaceChild(newElement,target);

let wrapper = document.createElement("DIV");
wrapper.innerHTML = htmlText;
target.innerHTML = wrapper.firstChild.innerHTML; 
target.classList.remove("triggerAttribute");

每次都是相同的结果，缺少空格，包括中断和非中断，通常（也许总是？）在 STRONG 标签之前或之后。