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功能从更改appendChildinsertBefore,似乎也没有任何改变。

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 回答