appendChild不会将子节点添加到子节点列表的末尾

Question

根据文档https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild，appendChild将节点添加到指定父节点的子节点列表的末尾。

但是，我的示例显示它将子项添加到子项列表的顶部。

那是怎么回事？知道为什么它会对文档发生吗？

根据文档，这些代码应该在targetArea节点的末尾添加一个新的div元素，而不是添加到节点的顶部。

var targetArea = document.getElementById('nav');
var div = document.createElement('div');
var snippet = document.createTextNode('this is a new DIV');
div.appendChild(snippet);
targetArea.appendChild(div);

我的在线代码： http://jsfiddle.net/dennisboys/BRtYb/6/

Answer 1

似乎是因为您将<div>放在<p>中，<div>将关闭<p>。

另见这个问题。 Putting <div> inside <p> is adding an extra <p>

Answer 2

您需要研究最终的DOM结构。

在你的jsFiddle中，节点的id =＆＃34; nav＆＃34;最后有两个孩子，一个文字节点，上面写着＆＃34;我是P内容＆＃34;和你附加的div。 div确实被放置为导航节点的最后一个子节点，就像它应该的那样。