innerText 会自动忽略或合并空白字符（如空格、换行），导致逐字符拼接时空格丢失；应改用 textContent，它严格保留原始字符串的所有字符，包括空白符。

`innertext` 会自动忽略或合并空白字符（如空格、换行），导致逐字符拼接时空格丢失；应改用 `textcontent`，它严格保留原始字符串的所有字符，包括空白符。

在 DOM 操作中，innerText 和 textContent 虽然都用于读写元素文本内容，但行为有本质区别：

• innerText 是渲染感知型（render-aware）：它反映浏览器实际渲染出的文本，会自动折叠连续空白（如多个空格、制表符、换行符）、忽略不可见空白，并受 CSS visibility 和 display 影响；
• textContent 是DOM 结构型（DOM-tree-aware）：它直接映射节点的文本内容，完全保留源字符串中的所有空白字符（空格、\n、\t 等），且不受样式影响，性能也更优。

因此，修复你示例中的问题只需将 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]; // ✅ 正确：空格和所有字符均被保留
}
console.log(e.textContent); // → "f o o b a r"

⚠️ 注意事项：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 不要混用 innerText 和 textContent：前者适合获取“用户可见文本”（如做可访问性检查），后者适合精确文本操作；
• 若需保留格式同时支持 HTML 标签解析，请改用 innerHTML 并手动转义（但存在 XSS 风险，不推荐仅用于纯文本）；
• textContent 对 <script> 或 <style> 内容返回其文本内容（而非执行/应用），符合预期安全行为。

总结：当目标是逐字符、无损地构建文本内容（尤其含空格、缩进或换行），始终优先使用 textContent；innerText 应仅用于与视觉呈现强相关的场景。

立即学习“前端免费学习笔记（深入）”；