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