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

【问题标题】：appendChild does not add a node to the end of the list of childrenappendChild 不会将节点添加到子列表的末尾
【发布时间】：2013-02-01 03:48:02
【问题描述】：

根据文档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/

【问题讨论】：

标签： javascript dom appendchild

【解决方案1】：

似乎是因为您将<div> 放入<p> 并且<div> 将关闭<p>。

另请参阅此问题。 Putting <div> inside <p> is adding an extra <p>

【讨论】：

在 p 中添加 div 肯定是错误的，但它解决了问题吗？
感谢pktangyue！从来不知道有这样的问题！
@MikeSpy 我认为在<p> 中使用<span> 而不是<div> 会更好。
很高兴听到这个消息！我正在 jsFiddle 上尝试这样做，但由于某种原因它不起作用......
@MikeSpy 你试过什么？看到这个jsfiddle 它工作正常。

【解决方案2】：

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

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

【讨论】：