(这个问题与上面的类似问题不同,因为它是关于附加和分离的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
输出到控制台三次.
第一次是原来的DIV:
The Title
A paragraph.
A second paragraph.
第二个是克隆的DIV,我预计它是相同的,但实际上是:
The TitleA paragraph.A second paragraph.
第三个也是克隆的DIV,但在将其添加到文档后,现在我预计它是:
The Title
A paragraph.
A second paragraph.
如果不是文档的一部分,为什么间距会有所不同?