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

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

CodePudding user response：

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

CodePudding user response：

you just need to set type as a checkbox.

   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);
  };

CodePudding user response：

After you have created li, just append a checkbox child to it:

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

li.appendChild(chk)

CodePudding user response：

Same way as the other elements, just as an input of type 'checkbox'

Also for accessibility purposes, it would be better to use a label instead of a text node.

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

CodePudding user response：

you can use this code

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

CodePudding user response：

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