克隆节点未附加到DOM树时innerText为何存在差异？

注意： 本问题聚焦于附加与分离DOM树之间的差异，与类似问题不同。

一段包含内部元素间无空格DIV的简单HTML代码如下：

<!DOCTYPE html>
<html>

  <body>
    <div><h1>The Title</h1><p>A paragraph.</p><p>A second paragraph.</p></div>
  </body>

  <script type="text/javascript">

   const div = document.querySelector("div");

   console.log(div.innerText);

   const clone = div.cloneNode(true);
   console.log(clone.innerText);

   document.body.appendChild(clone);
   console.log(clone.innerText);

  </script>
</html>

三次控制台输出的innerText结果如下：

1. 原DIV的innerText：

The Title

A paragraph.

A second paragraph.

2. 未添加到文档的克隆DIV的innerText：

The TitleA paragraph.A second paragraph.​

3. 克隆DIV附加到文档后的innerText：

The Title

A paragraph.

A second paragraph.

原因分析 #

这个差异的核心在于innerText的工作逻辑——它的输出直接关联元素的渲染状态：

• 原节点处于文档流中，浏览器已经完成布局渲染，h1、p这类块级元素默认独占一行，innerText会把这些块级元素带来的换行、间距转化为对应的空白字符输出。
• 刚克隆出的节点属于「分离DOM节点」，还未加入文档树，浏览器不会对它进行布局计算，自然无法识别块级元素的默认换行规则，所以所有文本直接拼接在一起，没有换行。
• 当克隆节点被添加到文档后，浏览器立即触发布局渲染，块级元素的默认样式生效，innerText就能正确输出带换行的文本内容。

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