AppendChild and InsertBefore

Question

我在处理动态创建的层级元素时遇到了一点问题。
一直在尝试使用insertBefore来改变它们的位置，但是没有成功，没有出现任何错误，但是元素还是在另一个元素下面。

我有一个函数，它创建一个名为dice-window-wrapper的类，并将其添加到page-content-wrapper中。

var outerDiv = createElementWithClass('div', 'dice-window-wrapper'),
innerDiv = createElementWithClass('div', 'dice-menubar-wrapper');
outerDiv.appendChild(innerDiv);
document.getElementById("page-content-wrapper").appendChild(outerDiv);

我得到了打印的代码 <div class="dice-window-wrapper">...</div>
这里没有问题。

然后我想使用这个函数添加一个无序列表，其中包含一些<li>标签：

icon_ul = createElementWithOutClass('ul');
var icon_ul = document.getElementById("page-menu-wrapper").appendChild(icon_ul);

icon_li = createElementWithId('li','icon-dice');
icon_ul.appendChild(icon_li);
document.getElementById("ul");

打印出来的结果将是<ul><li id="icon-dice"></li></ul>

问题就在于，<div class="dice-window-wrapper">...</div>应该放在<ul><li id="icon-dice"></li></ul>的后面。

但即使我将icon_ul函数中的appendChild改为insertBefore，似乎也没有任何变化。

- Dymond

---

@Passerby 他们不应该有关系，我只想让 UL 元素位于 dice-window-wrapper 元素之上。 - Dymond

@Dymond，你的 div 在 page-content-wrapper 中，而你的 ul 在 page-menu-wrapper 中，所以你不能强制 ul 在 div 的上方或下方，因为它们的顺序首先由其父元素确定。 - Passerby

@路人甲：那与问题无关。问题是为什么它不起作用。你的评论暗示着你不能将元素移动到其他父级。 - Cerbrus

@路人甲 你说得对极了！我怎么会忽略那个呢？ 问题不在我的 JS 文件里，而是在 PHP 里。 谢谢！ - Dymond

@FelixKling：所以，你的意思是：a.insertBefore(b,c) <-- 在这里，a 必须是 c 的父元素，对吧？ :P - Cerbrus

Answer 1

试试这个：

document.getElementById("page-menu-wrapper").insertBefore(icon_ul, outerDiv);

insertBefore 需要两个参数：要添加的内容，以及希望在其之前添加的内容。

查看 文档：

var insertedElement = parentElement.insertBefore(newElement, referenceElement);
//   ^ returns         ^add to this element:      ^ this new element, ^ before this existing element.

好的，假设问题在于：

document.getElementById("page-menu-wrapper").insertBefore(icon_ul, outerDiv);

在这里，outerDiv 的父元素不是 "page-menu-wrapper"。要么将该行替换为：

document.getElementById("page-content-wrapper").insertBefore(icon_ul, outerDiv);

或者替换：

document.getElementById("page-content-wrapper").appendChild(outerDiv);
// With
document.getElementById("page-menu-wrapper").appendChild(outerDiv);

- Cerbrus

---

嘿，这正是我尝试的，但icon_ul和outerDiv在控制台中没有显示任何变化，也没有错误。仍然可以在dice-window-wraper下看到Ul元素。 - Dymond

你是否在与创建 outerDiv 的作用域相同的范围内调用了 instertBefore？换句话说，你确定 outerDiv 不是 null 或 undefined 吗？如果 instertBefore 接收到 null 或 undefined 作为 referenceElement，它会像 appendChild 一样运行。 - Cerbrus

请注意，在#page-menu-wrapper内部没有outerDiv，因此我不确定您的旧代码是否有效，但这似乎也是OP之前遇到的错误在他注意到之前。 - Passerby

@路人甲：我也注意到了，现在已经编辑了答案。 - Cerbrus