textcontent 保留原始换行符，innertext 会压缩连续空白（含换行）为单个空格；编辑器中需原样读写换行时应使用 textcontent，而非 innertext。

为什么 innerText 里的换行在编辑器里“消失”了

因为 innerText 不保留原始换行符，它模拟的是用户用鼠标选中再复制粘贴的行为：连续空白（包括 \n、\t、多个空格）会被压缩成单个空格，块级元素间的换行也常被转为空格。你在 <pre class="brush:php;toolbar:false;"></pre> 或 white-space: pre 下看到的换行，在 innerText 中大概率变成空格或直接丢弃。

需要保留换行时，必须用 textContent

只要目标是「原样读取或写入含换行的文本」——比如代码编辑器内容同步、日志展示、富文本区域的纯文本备份——textContent 是唯一可靠选择。它把 DOM 中每个文本节点的原始字符（包括 \n、\r\n、缩进空格）不加修改地拼接返回。

• textContent 对 display: none 元素的内容照常提取，换行符也不受影响
• 若元素内有 <br>，它不会被解析为换行（<br> 是标签，不是文本节点），所以换行仍需来自真实文本节点中的 \n
• 写入时：el.textContent = "line1\nline2" 会准确渲染为两行（配合 white-space: pre 或 pre 标签）

在 contenteditable 编辑器里混用 innerText 的典型翻车点

很多简易编辑器用 div[contenteditable] + innerText 做内容获取，结果用户按回车后，innerText 返回的却是空格甚至空字符串——因为浏览器把 <div><br></div> 这类结构当作“不可见换行”，innerText 直接跳过。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 不要依赖 innerText 从 contenteditable 元素读取结构化文本
• 若必须用 contenteditable，读取时优先走 textContent + 手动解析 <div> / <code><p></p> 子节点的文本
• 更稳妥的做法是用 getSelection() + Range.toString() 获取当前选区纯文本（它行为接近 innerText，但可控）

textarea 和 pre 标签里换行处理更简单

textarea 的 value 属性天然保留换行；pre 标签下 textContent 与视觉一致，innerText 反而可能因样式干扰出错（比如 font-size: 0 导致内容被忽略）。

• 编辑器底层用 textarea 时，直接读 el.value，别碰 innerText
• 用 pre 渲染只读代码块时，写入用 textContent，避免 innerHTML 引入 XSS 风险
• 如果用 innerText 读 pre 内容，且 CSS 设置了 white-space: normal，换行就彻底没了——这点极易被忽略
换行不是“有没有”的问题，而是“谁负责解释”的问题：textContent 交还原始字符，innerText 交还渲染结果。编辑器场景下，你通常要的是前者。