Question

function addList(value) {
      const list = document.getElementsByClassName("list-div ")
      var div = document.createElement("div");
      div.classList.add("list-new");
       div.innerHTML = `<div class="h5-div" >
          <h5 class="list" >${value}</h5>
          </div>
          <div class="actions" >
          <span class="action-span" ><button 
                  class="action-btn">done</button></span>
          <span class="action-span" ><button 
                 class="action-btn">edit</button></span>
          <span class="action-span" ><button 
                   class="action-btn">delete</button></span>
          </div>`;

      list.appendChild(div);
}

Answer 1

最好在使用功能将元素附加到列表时，最好的选择是提供id而不是类。如果要使用该类，则必须使用[0]，因为“常量列表”是一个数组。您无法将子级添加到数组中，需要提供确切的元素。

Answer 2

使用list[0]是因为getElementsByClassName返回了HTMLCollection（类似数组的对象）：

list[0].appendChild(div);

Answer 3

getElementsByClassName返回HTML集合。您可能需要根据需要使用list [0]。

list[0].appendChild(div);

此外，如果您希望在自己的dom中获得一个唯一列表，则可以考虑使用document.getElementByID('uniqueId')。您需要以以下方式创建列表：

<ul id="uniqueId">
</ul>

错误说：“ list.appendChild不是函数”

3 个答案: