使用 innerText 动态拼接字符串会导致空格、制表符、换行符等不可见空白字符被自动忽略或折叠；应改用 textContent，它严格按原始字符串插入所有字符，包括空白符，且不触发渲染重排或 HTML 解析。
使用 `innertext` 动态拼接字符串会导致空格、制表符、换行符等不可见空白字符被自动忽略或折叠；应改用 `textcontent`，它严格按原始字符串插入所有字符，包括空白符，且不触发渲染重排或 html 解析。
在 Web 开发中，当需要逐字符向 DOM 元素追加文本（例如实现打字机效果、实时输入模拟等），若源字符串包含空格、换行符等空白字符，直接使用 element.innerText += char 会意外丢失这些空白——正如示例中 "f o o b a r" 最终显示为 "foobar"。
根本原因在于：
- innerText 是渲染感知型属性，它返回浏览器实际渲染出的“可见文本”，会自动合并连续空白、忽略前后空白、省略 <script>/<style> 内容，并受 CSS display、visibility 等样式影响；
- 更关键的是，innerText += x 实际执行的是「读取当前 innerText → 拼接新字符 → 再赋值回 innerText」，而每次读取都会触发一次“规范化空白”处理（类似 CSS 的 white-space: normal 行为），导致中间空格不断被抹除。
✅ 正确解法是使用 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]; // ✅ 保留每一个空格、换行符、制表符
}
console.log(e.textContent); // "f o o b a r"
console.log(e.innerHTML); // "f o o b a r"（无 HTML 标签，纯文本）? 补充说明：
立即学习“前端免费学习笔记（深入）”；
- textContent 是DOM 层面的原始文本表示，不经过样式计算，不解析 HTML，不触发重排，性能更优；
- 它完整保留 Unicode 空白字符（U+0020 空格、U+0009 制表符、U+000A 换行、U+000D 回车等）；
- 若需同时支持富文本（如嵌入 <strong>）或依赖 CSS white-space 控制显示效果，请改用 innerHTML + 转义（但需注意 XSS 风险），或统一设置 white-space: pre-wrap 配合 innerText（不推荐，仍存在规范化风险）。
⚠️ 注意事项：
- 不要混用 innerText 和 textContent 在同一元素上频繁切换，可能引发意外交互（如 innerText 读取后覆盖 textContent 的空白）；
- 若目标元素已有子节点（如 <span>hello <em>world</em></span>），textContent 会完全替换全部子节点为纯文本，此时应使用 appendChild(document.createTextNode(char)) 以保持结构；
- 在服务端渲染或 SSR 场景中，textContent 行为更可预测，适合构建一致的首屏内容。
总之：追求精确、可控、高性能的文本操作，请始终优先选用 textContent；仅当明确需要“视觉上可见的文本快照”（如截图前获取可读内容）时，才考虑 innerText。
