如何实现DOM中逐字符包含空格的字符串动画显示技巧？

本文共计672个文字，预计阅读时间需要3分钟。

本文字讲解如何使用`textContent`代替`innerText`实现带有空格的字符串逐字符动画渲染，并解决`innerText`自动忽略和压缩空白字符导致空格丢失的问题，并提供可直接运行的递归定时器实现方案。

在 Web 开发中，若需实现类似打字机效果（typewriter effect）——即逐个字符动态追加到页面元素中，开发者常误用 innerText 属性。但 innerText 会解析并渲染文本时自动折叠连续空白符（包括空格、制表符、换行），且对不可见空白不作保留，导致如 "hey you" 被显示为 "heyyou"。

根本原因在于：innerText 面向“用户可见文本”，其行为受 CSS 样式（如 white-space）和布局影响，而 textContent 是纯 DOM 文本节点的原始内容映射，严格保留所有 Unicode 字符，包括空格、零宽空格、换行符等，语义更准确、行为更可预测。

✅ 正确做法是改用 textContent，并推荐采用递归 setTimeout 替代循环中创建大量定时器（避免闭包陷阱与内存隐患）。