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