textContent 能可靠保留空格，因它操作原始文本节点、不触发渲染规范化；innerText 会折叠空白、受CSS影响且赋值时触发重排，导致空格丢失。
textContent 是唯一能可靠保留动态插入空格的 DOM 属性，innerText 会自动折叠所有空白字符。
为什么 innerText += 会吃掉空格
每次读取 innerText 都触发浏览器“渲染后文本规范化”：连续空格压成一个、首尾空格清空、换行转为空格。所以 element.innerText += ' ' 循环十次，最终只显示一个空格。
-
innerText返回的是“用户看到的文本”，不是你写的原始字符串 - 它受 CSS
display、visibility影响，甚至可能跳过隐藏元素内容 - 赋值时还会触发重排（reflow），性能差
textContent 怎么用才不丢空格
它直接操作 DOM 节点的原始文本节点，不解析 HTML，也不计算样式，所以 U+0020 空格、U+0009 制表符、U+000A 换行符全数保留。
- 写法：
el.textContent = 'a b\t\nc'—— 中间两个空格、一个制表符、一个换行都会原样显示（前提是容器 CSS 允许） - 追加写法：
el.textContent += ' '安全，不会二次规范化 - 注意：
textContent不支持 HTML 标签，如果字符串含<strong>，会被当纯文本显示
配合 white-space 才算真正“可见”
即使 textContent 存进了两个空格，若父容器 CSS 是默认的 white-space: normal，浏览器仍会把它们合并显示为一个。
立即学习“前端免费学习笔记（深入）”；
- 常用组合：
white-space: pre-wrap—— 保留空格和换行，同时允许自动折行 - 慎用
pre：强制不折行，长文本会撑破容器 - 别依赖
word-spacing模拟空格：它只控制词间距，对同一单词内的空格无效
最易被忽略的一点：服务端返回的字符串若含全角空格（U+3000）或零宽空格（U+200B），textContent 虽然能存住，但是否显示取决于字体支持和 CSS font-family 设置——这种空格在多数中文字体里不可见，调试时容易误判为“没生效”。
