如何附加由“li”包裹的复选框输入？答案

【问题标题】：How can I append a checkbox input wrapped by the 'li'?如何附加由“li”包裹的复选框输入？
【发布时间】：2022-01-16 08:53:54
【问题描述】：

我设法在“ul”中输入了“li”，但我需要在 li 中输入一个复选框，但我似乎无法弄清楚如何。

<body>
    <div class="card">
        
        <h1>To-do list</h1>
        
        <input type="text" id="taskInput" placeholder="Digite aqui sua tarefa">
        <button id="add">Adicionar</button>
        
        <ul id='tasks'>
            <li><input type="checkbox"> Tarefa 1</li>
        </ul>
        
    </div>
    <script>

      document.getElementById('add').onclick = function add() {

        const val = document.querySelector('input').value;
        const ul = document.getElementById('tasks');
        let li = document.createElement('li');
    
        li.appendChild(document.createTextNode(val));
        ul.appendChild(li);
      };

    </script>
</body>

【问题讨论】：

过程实际上与创建文本节点并附加它没有什么不同。您只需使用 createElement() 而不是 createTextNode()

标签： javascript list append

【解决方案1】：

您只需将类型设置为复选框。

   document.getElementById('add').onclick = function add() {
    var input = document.createElement("INPUT");
    input.setAttribute("type", "checkbox");
    const ul = document.getElementById('tasks');
    let li = document.createElement('li');

    li.appendChild(document.createTextNode(input));
    ul.appendChild(li);
  };

【讨论】：

解释是真的缺乏输入的创建，甚至设置它的类型。类型次要于 OP 的要求

【解决方案2】：

和其他元素一样，只是作为'checkbox'类型的输入

同样出于可访问性目的，最好使用label 而不是文本节点。

const val = document.querySelector('input').value;
const ul = document.getElementById('tasks');

let li = document.createElement('li');

let checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = 'tasks-' + val;
checkbox.value = val;
checkbox.setAttribute('name', 'tasks');

let label = document.createElement('label');
label.htmlFor = checkbox.id;
label.innerText = val;

li.appendChild(checkbox);
li.appendChild(label);
ul.appendChild(li);

【讨论】：

【解决方案3】：

尝试创建元素input并将类型指定为checkbox，并先将其添加到创建元素li，然后添加文本输入的值 最后也将其附加到 ul：

    document.getElementById("add").onclick = function () {
      const val = document.querySelector("#taskInput").value; //specify the selector
      const ul = document.getElementById("tasks");
      let li = document.createElement("li");

      let input = document.createElement("input"); //add Input
      input.type = "checkbox"; //specify the type of input to checkbox
      li.appendChild(input);
      li.appendChild(document.createTextNode(val));
      ul.appendChild(li);
    };

  <div class="card">
    <h1>To-do list</h1>

    <input type="text" id="taskInput" placeholder="Digite aqui sua tarefa" />
    <button id="add">Adicionar</button>

    <ul id="tasks">
      <li><input type="checkbox" /> Tarefa 1</li>
    </ul>
  </div>

【讨论】：

太完美了！谢谢

【解决方案4】：

创建li 后，只需在其上附加一个复选框子项：

let chk = document.createElement('input');
chk.setAttribute('type', 'checkbox');

li.appendChild(chk)

【讨论】：

【解决方案5】：

您可以使用此代码

<script>

  document.getElementById('add').onclick = function add() {

    const val = document.querySelector('input').value;
    const ul = document.getElementById('tasks');
    let li = document.createElement('li');

    let input = document.createElement('input');
    input.type='checkbox'
    li.appendChild(input)
    li.appendChild(document.createTextNode(val));
    ul.appendChild(li);
  };

</script>

【讨论】：

【解决方案6】：

    *This method is faster and cleaner*
    
<script>
 document.getElementById('add').onclick = function add() {
      const ul = document.getElementById('tasks');
    
      const val = document.querySelector('input').value;
    
      ul.innerHTML += `<li>${val}</li>`;
 };
</script>

【讨论】：