Ric*_*man 2 html javascript dom
（注意：这个问题与上面的类似问题不同，因为它是关于附加和分离 DOM 树之间的差异。）
\n一段简单的 HTML，包含一个 DIV，其元素之间没有空格：
\n<!DOCTYPE html>\n<html>\n\n <body>\n <div><h1>The Title</h1><p>A paragraph.</p><p>A second paragraph.</p></div>\n </body>\n\n <script type="text/javascript">\n\n const div = document.querySelector("div");\n\n console.log(div.innerText);\n\n const clone = div.cloneNode(true);\n console.log(clone.innerText);\n\n document.body.appendChild(clone);\n console.log(clone.innerText);\n\n </script>\n</html>我innerText向控制台输出了三遍。
第一次是原始 DIV 的时间：
\nThe Title\n\nA paragraph.\n\nA second paragraph.\n第二个是克隆的 DIV，我希望它是相同的，但它是：
\nThe TitleA paragraph.A second paragraph.\xe2\x80\x8b\n第三个也是克隆的 DIV，但将其添加到文档后，现在我期望它是：
\nThe Title\n\nA paragraph.\n\nA second paragraph.\n当它不是文档的一部分时，为什么间距不同？
\n这是分离DOM 节点的innerText的一个怪癖：
如果元素本身未呈现（例如，与文档分离或从视图中隐藏），则返回值与属性相同
Node.textContent。
这是因为innerText考虑了 CSS（在本例中，display: block标签的属性用于插入新行 ( \n)）。
根据计算 的算法innerText，步骤 9 表示：
如果节点使用的“display”值是块级或“table-caption”，则在项目的开头和结尾附加 1（所需的换行符计数）。
如您所见，将克隆节点插入 DOM 后，会innerText返回原始节点所做的操作，因为它能够计算这些 CSS 属性：
const div = document.querySelector("div");
console.log("Original, innerText:", JSON.stringify(div.innerText));
console.log("Original, textContent:", JSON.stringify(div.textContent));
const clone = div.cloneNode(true);
console.log("Detached clone, innerText:", JSON.stringify(clone.innerText));
console.log("Detached clone, textContent:", JSON.stringify(clone.textContent));
document.body.appendChild(clone);
console.log("Attached clone, innerText:", JSON.stringify(clone.innerText));
console.log("Attached clone, textContent:", JSON.stringify(clone.textContent));<div><h1>The Title</h1><p>A paragraph.</p><p>A second paragraph.</p></div>