Javascript 如何将用户输入添加到清单中，然后将其放置在标签中？

我想将用户输入添加到一个列表中，该列表包含一个标签，其中包含类型为“checkbox”的输入

我看到了其他问题，并使用了它们的代码，但它们不起作用。单击“添加”时，不会发生任何事情

以下是我在W3Schools上找到的JavaScript，以及我自己的一个类似问题，以及W3Schools链接：

我思考我理解使用此代码我无法将用户输入放在输入标签内，然后是标签，因此我想知道是否有办法做到这一点

如果您想查看，请看我的JavaScript：

function addToList() {
    var li = document.createElement("LI");
    var userInput = document.getElementById("userInput").value;
    var text = document.createTextNode(userInput);
    li.appendChild(text);

    var list = document.getElementById("cntr_List");
    list.insertBefore(li, list.childNodes[0]);
}

以下是列表本身（当然是HTML）以及文本输入：

<div class="center" id="cntr">
    <div class="header">
        <h2>Add an item</h2>
        <input type="text" id="userInput" style="width: 100%;" placeholder = "Add new task...">
            <span onclick="addToList()" style="cursor: pointer;" id="addBtn" >Add</span>
        </div>
        <ol style="list-style-type:none" id="cntr_list">
            <li><label onclick="openNav()"><input type="checkbox" value="ON" class="test" /> Item 1</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 2</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 3</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 4</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 5</label></li>
        </ol>
</div>

添加项目
添加
项目1
项目2
项目3
项目4
项目5

---

如果我所做的不可行或HTML/JavaScript不好，请原谅我，因为我还在学习。我非常愿意接受您的任何建议，这些建议将给我相同或相似的结果。如果无法实现我想要实现的目标，请随意说出来，并告诉我原因。

您真的在使用jQuery吗？尝试以下方法，仅用于测试目的：

$（“#cntr_列表”）。追加（“
测试”
”）

刚刚测试过，它就可以工作了：
您正在尝试在
var list=document.getElementById（“cntr_list”）上选择null元素原因应该是
var list=document.getElementById（“cntr_list”）
您可以使用Jquery。这是实现目标的简单方法。请尝试以下方法：


$（函数（）{
$（'#addBtn'）。在（'click'，function（）上{
$（“#cntr_list”）.prepend（“
”+$（“#userInput”）.val（）+”
）；
});
});

添加项目
添加
项目1
项目2
项目3
项目4
项目5
只需对代码稍加修改即可。你可以用JS来做这件事


函数addToList（）{
var userInput=document.getElementById（“userInput”）.value；
var li=document.createElement（“li”）；
var textnode=document.createTextNode（userInput）；
var x=document.createElement（“输入”）；
x、 setAttribute（“类型”、“复选框”）；
x、 setAttribute（“值”、“开”）；
li.儿童（x）；
li.appendChild（textnode）；
var list=document.getElementById（“cntr_列表”）；
list.insertBefore（li，list.childNodes[0]）；
}

添加项目
添加
项目1
项目2
项目3
项目4
项目5
试试这个：


函数addToList（）{
//创建“li”元素
var li=document.createElement（'li'）；
//创建标签并将其插入到li中
var label=document.createElement（'label'）；
li.儿童（标签）；
//创建复选框并将其插入标签中
var checkbox=document.createElement（'input'）；
checkbox.type='checkbox'；
checkbox.classList.add（'test'）；
checkbox.value='ON'；
label.appendChild（复选框）；
//获取输入值，并将其插入标签中
var userInput=document.getElementById（“userInput”）.value；
var text=document.createTextNode（userInput）；
label.appendChild（文本）；
//最后将其添加到您的列表中。
//这里有一个输入错误：“cntr_list”是“cntr_list”，注意JavaScript区分大小写。
var list=document.getElementById（'cntr_list'）；
list.insertBefore（li，list.childNodes[0]）；
}

添加项目
添加
项目1
项目2
项目3
项目4
项目5
您真的在使用jQuery吗？试着这样做，只是为了测试目的：
$（“#cntr_列表”）.append（“
test
”）<div class="center" id="cntr">
    <div class="header">
        <h2>Add an item</h2>
        <input type="text" id="userInput" style="width: 100%;" placeholder = "Add new task...">
            <span onclick="addToList()" style="cursor: pointer;" id="addBtn" >Add</span>
        </div>
        <ol style="list-style-type:none" id="cntr_list">
            <li><label onclick="openNav()"><input type="checkbox" value="ON" class="test" /> Item 1</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 2</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 3</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 4</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 5</label></li>
        </ol>
</div>