为何innerHTML赋值时<br>标签表现异常？真实DOM与JS创建DOM的innerText差异

核心原因 #

innerText的输出结果直接关联元素是否处于文档流中：

• 页面中已存在的真实DOM元素（比如代码里的real）处于文档流内，浏览器会按照CSS渲染规则处理内容，<br>标签会被解析成换行符，因此real.innerText会输出带换行的foo\nbar。
• 用JavaScript创建的fake元素默认处于离线状态（未挂载到文档树），浏览器不会对其应用完整的排版渲染逻辑，<br>标签不会被转换成换行符，所以fake.innerText直接返回拼接后的文本foobar。

代码片段的问题 #

代码中仅创建了fake元素并设置了innerHTML，但从未将其挂载到文档流中（比如没有调用document.body.appendChild(fake)）。这导致fake始终是离线DOM元素，innerText无法触发换行处理逻辑，最终输出和real.innerText不一致。

验证修正 #

如果在打印前添加挂载代码：

document.body.appendChild(fake);

此时再打印fake.innerText，输出就会和real.innerText一致，显示带换行的内容。

补充说明 #

• textContent不受元素是否挂载的影响，它会直接提取所有文本内容并忽略标签，所以real.textContent和fake.textContent输出一致，都是foobar。
• innerHTML则直接返回元素的HTML结构，不管是否挂载，real.innerHTML和fake.innerHTML都会输出foo<br>bar。

内容的提问来源于stack exchange，提问作者Basti