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时，您似乎没有处理标记，因为您似乎正在考虑（从变量名称dice_toolbar_wrapper_close），您正在处理< EM>物体。没有“开放”和“关闭”标签，有元素。

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

})();

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

1 个答案: