Question

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

我已经看到了其他问题，并使用了他们的代码，但它们不起作用。单击“添加”时没有任何反应。

以下是我在W3Schools上发现的JavaScript以及与我自己的类似问题，以及W3Schools链接：

https://www.w3schools.com/jsref/met_node_insertbefore.asp

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

我想我明白使用这段代码我不能将用户输入放在输入标签内，后跟标签，所以我想知道是否有一种方法。

如果您想看到它，请使用我的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>

如果我正在做的不是HTML / JavaScript可行或不好，请原谅我，因为我还在学习。我对你提出的任何建议都持开放态度，这些建议会给我相同或类似的结果。如果没有办法完成我想要实现的目标，请随意说出来，并告诉我原因。

Answer 1

您可以使用Jquery。这是一种简单的实现方法。试试这个：

$(function(){
$('#addBtn').on('click',function(){
$("#cntr_list").prepend('<li><label><input type="checkbox" value="ON" class="test" />'+$('#userInput').val()+'</label></li>');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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 style="cursor: pointer;" id="addBtn" >Add</span>
        </div>
        <ol style="list-style-type:none" id="cntr_list">
            <li><label><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>

Answer 2

您的代码稍作修改。你可以用JS

来做到这一点

＆＃13;

function addToList() { 
    var userInput = document.getElementById("userInput").value;
    var li = document.createElement("LI");
    var textnode = document.createTextNode(userInput);
    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    x.setAttribute("value", "ON");
     li.appendChild(x);
    li.appendChild(textnode);

    var list = document.getElementById("cntr_list");
    list.insertBefore(li, list.childNodes[0]);
    
}

＆＃13;

<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>

＆＃13;

希望这有帮助

Answer 3

试试这个：

＆＃13;

function addToList() {
  // Create you "li" element
  var li = document.createElement('li');

  // Create your label and insert it inside your li
  var label = document.createElement('label');
  li.appendChild(label);
  
  // Create your checkbox and insert it inside your label
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.classList.add('test');
  checkbox.value = 'ON';
  label.appendChild(checkbox);

  // Get the input value, and insert it inside your label
  var userInput = document.getElementById("userInput").value;
  var text = document.createTextNode(userInput);
  label.appendChild(text);
  
  // And finally append it to your list.
  // There was a typo here : 'cntr_list' was 'cntr_List', beware as JavaScript is case-sensitive.
  var list = document.getElementById('cntr_list');
  list.insertBefore(li, list.childNodes[0]);
}

＆＃13;

<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>

＆＃13;

Answer 4

你真的在使用jQuery吗？试试这个，仅用于测试目的：

$("#cntr_list").append('<li><label><input type="checkbox" value="ON" /> test </label></li>');

刚刚测试过，它有效：https://jsfiddle.net/ng1unsoh/

Answer 5

您正尝试在var list = document.getElementById("cntr_List");上选择null元素，因为它应该是var list = document.getElementById("cntr_list");

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

5 个答案: