Javascript 使用JS向HTML div添加复选框时遇到问题

作为编程高手，我遇到了一些HTML/JS语法问题。我正在尝试创建一个动态复选框列表，您可以在其中添加要完成的任务。我已经做了研究，浏览了至少10个网站，出于某种原因，似乎什么都没用。我在代码中找不到任何东西，我尝试了多种方法。 HTML:

待办事项清单
var\uuuu adobebfontsappname=“dreamweaver”
待办事项清单

JS:

var addTask=函数（）{
/*var newCheckBox=document.createElement（'input'）；
var checkboxText=document.getElementById（“checkboxName”）.value；
newCheckBox.type='checkbox'；
newCheckBox.value=（checkboxText+'
'）；
var parentElement=document.getElementById（“toBeDone”）；
parentElement.appendChild（newCheckBox）*/
/*var newCheckbox=document.createElement（“输入”）；
newCheckbox.type=“checkbox”；
var checkboxTextNode=document.createTextNode（document.getElementById（“checkBoxName”）.value）；
appendChild（checkboxTextNode）；
document.getElementById（“toBeDone”）.appendChild（newCheckbox）*/
var newCheckbox=document.createElement（“输入”）；
checkbox.type=“checkbox”；
checkbox.value=document.getElementById（“checkboxName”）.value；
document.getElementById（“toBeDone”）.appendChild（newCheckbox）；
var label=document.createElement（'label'）；
label.htmlFor=document.getElementById（“checkboxName”）.value；
label.appendChild（document.createTextNode（document.getElementById（“checkboxName”）.value））；
document.getElementById（“toBeDone”）.appendChild（标签）；
document.getElementById（“toBeDone”）.appendChild（document.createElement（“br”））；
}

您正在使用提交类型输入

当您单击提交按钮时，页面将重新加载，您无法看到javascript代码的结果

用按钮代替

<input type="button" value="Add New Task" onClick="addTask()" id = "taskAdder">

---

在创建元素并将其附加到DIV时使用变量

newCheckbox

，但在设置类型和值时使用变量

checkbox

var newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.value = document.getElementById("checkboxName").value;
document.getElementById("toBeDone").appendChild(newCheckbox);

标签不起作用，因为

for

属性必须与复选框的

id

匹配，并且您从不给出复选框

id

s。如果您只是将标签包装在复选框周围，则效果会更好，因此生成的HTML如下所示：

<label><input type="checkbox" value="whatever">whatever</label>

不管怎样 我把这个留给你做练习

---

最好是编写html并使用脚本插入它，而不是手动设置一切内容，如createElement、checkbox.type、value等。如果它不在

中，则不会重新加载。

var newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.value = document.getElementById("checkboxName").value;
document.getElementById("toBeDone").appendChild(newCheckbox);

<label><input type="checkbox" value="whatever">whatever</label>