JavaScript HTML DOM 元素（节点） 我写的这俩句有什么不同吗

Question

        （1）        document.createElement("p").appendChild(document.createTextNode("这是新段落。"));        document.getElementById("div").appendChild(document.createElement("p"));（2）        var para = document.createElement("p");        var node = document.createTextNode("这是新段落。");        para.appendChild(node);        var element = document.getElementById("div");        element.appendChild(para);

Answer 1

当然有区别。首先明确lz的思路是创建一个文本节点，再创建一个p节点，然后把文本节点追加到p节点中，再把整个p节点追加到div中。

首先请lz试一下：

document.getElementById("div").appendChild(document.createElement("p").appendChild(document.createTextNode("这是新段落。")));

可以很明显看到有结果。

我们说创建一个新的节点的时候，这个节点是处于游离状态的，除非你把它追加到已存在的元素中，否则我们就看不到它。也就是说每一个document.creatElement("p")和document.creatElement("p")是不同的，他们是两个游离的p元素。lz很明显在第一段代码里把他们当成了一个元素，所以当你运行第一段代码的时候，div里只有一个空的p标签！

相反，第二段给每一个节点都赋给了变量，通过变量来追加元素，指代都很明显，所以就成功啦~~

个人理解，希望对你有帮助！

Answer 2

要写一行就干脆写一行

document.getElementById("div").appendChild(document.createElement("p").appendChild(document.createTextNode("这是新段落。")));

要么把上面的存到变量里，下面继续使用

var p = document.createElement("p").appendChild(document.createTextNode("这是新段落。"));
document.getElementById("div").appendChild(p);

Answer 3

为什么上面那一句是错的了

Answer 4

还真没有