3

我对动态创建的层次结构元素有一点问题。
一直在尝试使用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>应该在 string 之下<ul><li id="icon-dice"></li></ul>。

但即使我将icon_ul功能从更改appendChild为insertBefore，似乎也没有任何改变。

4

1 回答 1

1

试试这个：

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

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

请参阅此处的文档：

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

在那里，outerDivis not的父级"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);
于 2013-02-01T09:30:06.403 回答