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

我试图创建一个函数，在无序列表的每个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);
    // }
}

函数deleteItems（）{
var list=document.getElementById（'screery-list'）.getElementsByTagName（'li'）；
//创建复选框
delete_box=document.createElement（“输入”）；
删除_box.setAttribute（“类型”、“复选框”）；
//这仅将复选框附加到第二个li
列表[0]。追加（删除\u框）；
列表[1]。追加（删除\u框）；
//循环应该为每个li元素添加复选框，但只附加最后一个li
//for（变量i=0，len=list.length；i

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

---

感谢您创建了一个元素，并尝试将其添加到所有位置。相反，您应该在每次添加之前创建一个新元素

请比较两个片段：

const items=document.getElementsByTagName（“li”）；
常量段落=document.createElement（“p”）；//您创建了一个新元素（一次）
paragration.innerText=“我是新元素”；
用于（项目的常数项）{
项目.附加（第段）；
}
//首先，将段落添加到第一项
//然后将段落从第一项移至第二项
//最后将段落从第二项移至第三项

首先
第二
第三

只需创建一次元素，然后尝试将其添加到所有位置。相反，您应该在每次添加之前创建一个新元素

请比较两个片段：

const items=document.getElementsByTagName（“li”）；
常量段落=document.createElement（“p”）；//您创建了一个新元素（一次）
paragration.innerText=“我是新元素”；
用于（项目的常数项）{
项目.附加（第段）；
}
//首先，将段落添加到第一项
//然后将段落从第一项移至第二项
//最后将段落从第二项移至第三项

首先
第二
第三

像这样：

函数deleteItems（）{
var list=document.querySelectorAll（“#杂货清单li”）；
list.forEach（e=>{
让delete_box=document.createElement（“输入”）；
删除_box.setAttribute（“类型”、“复选框”）；
e、 前置（删除_框）；
});
}
删除项目（）；
document.querySelector（“#杂货店列表”）.style[“列表样式类型”]=“无”
#杂货清单li输入{
右边距：1米
}

项目1
项目2
项目3
像这样：


函数deleteItems（）{
var list=document.querySelectorAll（“#杂货清单li”）；
list.forEach（e=>{
让delete_box=document.createElement（“输入”）；
删除_box.setAttribute（“类型”、“复选框”）；
e、 前置（删除_框）；
});
}
删除项目（）；
document.querySelector（“#杂货店列表”）.style[“列表样式类型”]=“无”
#杂货清单li输入{
右边距：1米
}

项目1
项目2
项目3



A
B

函数deleteItems（）{
var tableFields=document.getElementById（“readroot”）；
tableFields=tableFields.children；
log（“表字段”，表字段）
for（设i=0；i



A
B

函数deleteItems（）{
var tableFields=document.getElementById（“readroot”）；
tableFields=tableFields.children；
log（“表字段”，表字段）
for（设i=0；i
简单克隆将使您的代码正常工作，这样您就不会一次又一次地附加相同的元素


const lis=document.queryselectoral（'li'）；
var inp=document.createElement（'input'）
inp.type='复选框'
lis.forEach（功能（li）{
console.log（li）
li.appendChild（inp.cloneNode（））
})

一,
二,
三,
简单克隆将使您的代码正常工作，这样您就不会一次又一次地附加相同的元素


const lis=document.queryselectoral（'li'）；
var inp=document.createElement（'input'）
inp.type='复选框'
lis.forEach（功能（li）{
console.log（li）
li.appendChild（inp.cloneNode（））
})

一,
二,
三,
，因为每次迭代都会附加相同的元素。由于一个元素只能位于一个位置，因此它会移动。克隆可以使它工作，因为在每次迭代中都附加相同的元素。由于一个元素只能位于一个位置，因此它会移动。克隆人会让它工作的