HTMLElement累加赋值时空格丢失问题求助

为什么空格会消失？ #

你遇到的问题根源在于innerText的特性：它会自动规范化文本内容，包括修剪首尾空白、合并连续空白字符。当你执行e.innerText += s[i]时，实际流程是：

1. 读取当前e.innerText（此时会自动把之前追加的末尾空格修剪掉）
2. 拼接新字符
3. 把拼接后的内容设置回e.innerText

循环下来，每次追加的空格都会被后续的读取操作剪掉，最终所有空格都丢失了。

解决办法 #

方法1：维护独立的字符串缓冲区，一次性设置内容

不要每次通过innerText读取当前内容，而是自己维护一个字符串变量，拼完所有字符后再一次性赋值给innerText：

let s = "f o o b a r";
let e = document.createElement('span');
let content = '';
for (let i = 0; i < s.length; i++) {
  // 这里做你的自定义处理
  content += s[i];
}
e.innerText = content;

这个方法会遵循浏览器默认的文本渲染规则（单个空格保留，多个连续空格合并），不需要修改CSS。

方法2：用textContent代替innerText

textContent不会对文本做规范化处理，会完全保留原始的空白字符（包括空格、换行符），直接替换即可：

let s = "f o o b a r";
let e = document.createElement('span');
for (let i = 0; i < s.length; i++) {
  // 这里做你的自定义处理
  e.textContent += s[i];
}

这个方法适合需要精确保留原始文本格式的场景，不需要额外CSS。

补充：为什么不用whitespace: pre？

white-space: pre确实能强制保留空白，但它会同时禁用文本的自动换行，导致内容超出容器时不会折行，显得冗余。上面的两种方法都不需要修改CSS，就能解决空格丢失的问题。

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