javascript - 何时将元素实际添加到 DOM 树中？

Question

假设我有以下代码片段：

var NewNode = document.createElement("div");

NewNode.appendChild(document.createTextNode("Hello World!"));

document.body.appendChild(NewNode);

我实际上在 DOM 树的哪一行添加了一个元素？

Answer 1

这里 NewNode 被添加到 DOM：

document.body.appendChild(NewNode);

在这里，您只需在内存中创建一个对象：

var NewNode = document.createElement("div");

NewNode.appendChild(document.createTextNode("Hello World!"));

Answer 2

最后一行：document.body.appendChild(NewNode);将元素添加到当前渲染的 DOM。但是，没有什么可以阻止您构建多个单独的 dom 树：您可以将 x/html 文档解析为 DOM 树，或者创建一堆新元素并构建一个新的树/DOM 片段。

Answer 3

为了非常具体地回答您的问题，您将在第三行附加到文档 DOM 树。但是您的问题的措辞存在概念上的混乱。

在第一行之后有不止一个 DOM 树。有 (1) 文档的 DOM 树，您将其称为“该” DOM 树，尽管严格来说这不是唯一的，还有 (2) 由单个div元素组成的 DOM 树。此时，这两个 DOM 树是没有连接的。在执行完第二行之后，较新的 DOM 树中有两个节点，而不仅仅是一个。并且非常挑剔，在 return 之后createTextNode但在appendChild被调用之前，有三个 DOM 树。在第三行之后，您将返回到单个 DOM 树，它可以通过document.