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树中有两个节点，而不仅仅是一个节点。并且在createTextNode返回之后但在appendChild被调用之前立即完全是个笨蛋，有三个DOM树。在第三行之后，您将返回到单个DOM树，即可通过document访问的树。

什么时候实际添加到DOM树中的元素？

3 个答案: