javascript - 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>.

另请参阅此问题。将 <div> 放入 <p> 就是添加一个额外的 <p>

Answer 2

您需要研究最终得到的实际 DOM 结构。

在您的 jsFiddle 中，具有 id="nav" 的节点最终有两个子节点，一个显示“我是 P 内容”的文本节点和您附加的 div。div 确实被放置为导航节点的最后一个子节点，就像它应该做的那样。