javascript - 如何为无序列表中的每个元素添加复选框？

Question

我正在尝试创建一个函数，为无序列表的每个 li 元素添加一个复选框。我能够对一个 li 元素完成此操作:

function deleteItems() {
    var list = document.getElementById('grocery-list').getElementsByTagName('li');

    // create checkbox
    delete_box = document.createElement("input");
    delete_box.setAttribute("type", "checkbox");

    // this only appends check box to SECOND li
    list[0].append(delete_box);
    list[1].append(delete_box);

    // loop is supposed to add check box to every li element, but only appends LAST li
    // for (var i = 0, len = list.length; i < len; i++) {
    //     list[i].append(delete_box);
    // }
}

问题在于，调用该函数时，该复选框仅附加到一个 li。我是 javascript 和 html 的新手，如果有人问过此类问题，我很抱歉，但我找不到任何关于为什么列表表现如此的信息。

谢谢

Answer 1

您创建一个元素一次并尝试将其附加到任何地方。相反，您应该在每次添加之前创建一个新元素。

请比较两个片段:

const items = document.getElementsByTagName("li");

const paragraph = document.createElement("p"); // You created a new element (one time)
paragraph.innerText = "I'm new element";

for (const item of items) {
  item.append(paragraph);
}

// First you add the paragrap to first item
// Then you move the paragraph from first item to second item
// At end you move the paragraph from second item to third item

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

还有

const items = document.getElementsByTagName("li");

for (const item of items) {
  const paragraph = document.createElement("p"); // You created a new element
  paragraph.innerText = "I'm new element";

  item.append(paragraph); // And append it to current item
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>