AppendChild和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，也似乎没有任何变化。

Answer 1

试试这个：

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

insertBefore需要2个参数：要添加的内容，以及添加内容之前的内容。

请参阅documentation here：

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);