appendChild 正在“吃掉”孩子们答案

【问题标题】：appendChild is "eating" the childrenappendChild 正在“吃掉”孩子们
【发布时间】：2012-11-06 18:51:56
【问题描述】：

我有一个大 div 容器的结构：

var bigcontainer = document.createElement('div');

其中包含三个项目：一个标题，一组按钮和主要信息：

var divheader = document.createElement('div');
var divbuttons = document.createElement('div');
var divinfo = document.createElement('div');

这三个项目是分开的，它们都不在彼此内部。它们是大 div 容器内的三个独立实体。

他们可以被视为bigcontainer 的孩子吗？

我这样做：

bigcontainer.appendChild(divheader);
bigcontainer.appendChild(divbuttons);
bigcontainer.appendChild(divinfo);

按钮和标题消失。唯一可见的是divinfo。这是否意味着标题和按钮不会算作bigcontainer 的子级？

感谢您的帮助。我很难理解 DOM 树，但我会到达那里......

【问题讨论】：

那里还有其他事情发生。
显示一个例子。看起来它应该工作。还可以使用调试器查看呈现的 HTML 结构 stackoverflow.com/questions/4445759/…
在您的代码运行时，您描述的任何内容都不会被观察到。 jsfiddle.net/9LU7m 为了更清楚一点，这里是同样的东西，但元素上有 ID。 jsfiddle.net/9LU7m/1
他们不会消失；他们一开始就没有在 DOM 中。如果有的话，使用 appendChild 添加它们到 DOM。
我在一秒钟内更新了整个 jsfiddle 代码...

【解决方案1】：

您是否尝试将它们插入两个不同的位置？如果是这样，appendChild 会将一个节点从之前的位置移动。

【讨论】：