未排序內側DOM創建一個無序列表

Question

所以我creted JavaScript的UL列表，但層次不會得到正確的...我真的不知道如何相互embeed馬克...

這是Im的表情。

<div class="dice-toolbar-wrapper"> 
<ul> 
<li class="add"></li> 
<li class="remove"></li> 
<li class="roll"></li> 
<li> 
<ul class="dice-toolbar-counter-wrapper"> 
<li class="zero"></li> 
<li class="zero"></li> 
</ul> 
</li> 
</ul> 
</div> 

這就是我如何創建列表。

dice_toolbar_wrapper_close = createElementWithClass('div', 'dice-toolbar-wrapper'); 
    outerDiv.appendChild(dice_toolbar_wrapper_close); 
    document.getElementById("page-content-wrapper"); 

    add_remove_roll = createElementWithOutClass('ul'); 
    dice_toolbar_wrapper_close.appendChild(add_remove_roll); 
    document.getElementById("dice-content-wrapper"); 

但這是我在渲染頁面後得到的。

<div class="dice-toolbar-wrapper"> 
<ul> 
<li class="add"></li> 
<li class="remove"></li> 
<li class="roll"></li> 
</ul> 
<ul class="dice-toolbar-counter-wrapper"> 
<li class="zero"></li> 
</ul> 
</ul> 
</div> 

有關如何更改鋰標籤的任何提示？

感謝

Answer 1

當你處理DOM的，你不標記你似乎在想（從變量名dice_toolbar_wrapper_close），你處理對象處理。沒有「開放」和「關閉」標籤，有元素。

所以創建一個ul：

var ul = document.createElement('ul'); 

爲了把一個li裏面：

var li = document.createElement('li'); 
ul.appendChild(li); 

而且這正是相同的，如果你想創建一個內部ul也放到了在li：

var innerUl = document.createElement('ul'); 
li.appendChild(innerUl); 

完整示例：Live Copy | Source

(function() { 

    var outerUL, li, innerUL, thirdLI, index; 

    outerUL = document.createElement('ul'); 
    for (index = 0; index < 5; ++index) { 
    li = document.createElement('li'); 
    li.innerHTML = "Outer li #" + index; 
    if (index === 2) { 
     thirdLI = li; 
    } 
    outerUL.appendChild(li); 
    } 

    innerUL = document.createElement('ul'); 
    for (index = 0; index < 3; ++index) { 
    li = document.createElement('li'); 
    li.innerHTML = "Inner li #" + index; 
    innerUL.appendChild(li); 
    } 
    thirdLI.appendChild(innerUL); 

    document.body.appendChild(outerUL); 

})();