javascript - 使用 DOM 创建的未排序列表中的未排序列表

Question

所以我用 Javascript 创建了一个 UL 列表，但是层次结构不正确……而且我真的不知道如何相互嵌入 dem……

这是我挣扎的样子。

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

关于如何更改 li 标签的任何提示？

谢谢

Answer 1

当您处理 DOM 时，您不是在处理标记，因为您似乎正在考虑（从变量 name dice_toolbar_wrapper_close），您正在处理objects。没有“打开”和“关闭”标签，有元素。

所以要创建一个ul：

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

li在里面放一个：

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

如果您想创建一个内部并将其放入：ulli

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

完整示例：Live Copy | 资源

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

})();