DOM渲染插入元素时出现空格丢失问题

空格丢失的核心原因 #

浏览器的HTML解析引擎遵循W3C规范，会对文本中的空白字符做规范化处理：

• 连续的空格、换行、制表符会被合并成单个空格
• 元素标签首尾的独立空白文本节点会被直接忽略
• inline元素（如<strong>、<span>）与相邻文本之间的空格，在解析过程中极易被合并或清除，这就是你观察到<strong>前后空格消失的直接原因。

你尝试的三种方法（outerHTML、innerHTML、div容器解析替换）本质都是让浏览器解析HTML字符串，必然触发上述空白规范化，所以无法解决问题。

非CSS边距的解决方案 #

1. 用非换行空格 替换普通空格 #

将需要保留的空格替换为HTML实体 ，该实体表示不可换行的空格，浏览器会完整保留它，不会进行合并处理。

修改后的HTML示例：

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

2. 手动构建DOM节点（JS动态插入场景） #

如果是通过JavaScript动态生成DOM，不要依赖HTML字符串解析，而是拆分文本和元素，手动创建并拼接节点。这种方式完全绕开浏览器的空白规范化逻辑，空格会被精准保留。

示例代码：

// 创建父容器
const parentSpan = document.createElement('span');
parentSpan.style.fontSize = '12px';

// 逐个添加文本和元素节点
parentSpan.appendChild(document.createTextNode('Si tiene alguna pregunta sobre la información provista, llame a '));

const strong1 = document.createElement('strong');
strong1.textContent = 'la sala de partos';
parentSpan.appendChild(strong1);

parentSpan.appendChild(document.createTextNode(', al teléfono '));

const strong2 = document.createElement('strong');
const phoneSpan = document.createElement('span');
phoneSpan.style.color = 'rgb(149, 55, 52)';
phoneSpan.textContent = '(650) 723-5403';
strong2.appendChild(phoneSpan);
parentSpan.appendChild(strong2);

parentSpan.appendChild(document.createTextNode('.'));

// 替换目标元素
targetElement.replaceWith(parentSpan);

3. 给父元素设置white-space: pre-wrap（全局保留空白场景） #

如果需要保留整个文本中的所有空白（包括换行、多个连续空格），可以给父元素添加CSS样式white-space: pre-wrap。该样式会让浏览器保留所有空白字符，但允许文本自动换行。

示例：

<span style="font-size: 12px; white-space: pre-wrap;">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);">(650) 723-5403</span></strong>.</span>

注意：此方法会保留文本中所有原始空白，可能影响原本的排版，适合需要完整保留格式的场景。

内容的提问来源于stack exchange，提问作者Thor