How can I append a checkbox input wrapped by the 'li'?

December 12, 2021

I managed to input the ‘li’ inside the ‘ul’, but I need to have a checkbox input inside the li, and I can’t seem to figure how.

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

>Solution :

Try to create element input and specify the type to checkbox and added it to created element li first, then add the text value of input also lastly append it to 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>