Question

So I have creted an UL list with Javascript, but the hierarchy wont get right… And I really dont know how to embeed dem with each other…

This is the look Im strungling for.

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

This is how I create the list.

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

But this is what I get after rendering the page.

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

Any tips on how i can change the li tags ?

Thanks

Answer 1

When you’re dealing with the DOM, you’re not dealing with markup as you seem to be thinking (from the variable name dice_toolbar_wrapper_close), you’re dealing with objects. There are no “open” and “close” tags, there are elements.

So to create a ul:

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

To put an li inside it:

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

And it’s exactly the same if you want to create an inner ul and put that in the li:

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

Complete example: 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);

})();