如何制作每个 <li> 有一个复选框（HTML和Javascript）

Question

I'm creating a Chrome Extension that allows the user to create a todo list. So far I am able to type in a task and submit it. Now I want this input, which is a list, to have a checkbox. Right now, whenever the user submits a task, it is counted as a list.

HTML:

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox"><label>test</label></li>
</ul>

Javascript:

$(() => {
   $('input').on('keypress', function(e) {
     if (e.keyCode == 13) {
       const newTask = $(this).val();
       if (newTask) {
         const li = document.createElement('li');
         li.textContent = newTask;
         $('#tasksUL').append(li);
         $(this).val("");
       }
     }
   });
 });

Answer 1

add child to li,just like above you done.

const input=document.createElement('input')
         input.type="checkbox"
         li.append(input)

Answer 2

Well, by the way you're doing, you'll first have to create the input checkbox and its label and then add it to the list.

Here is an example with your code: https://codepen.io/pedrovsn/pen/ZdqrGw

$(() => {
   $('input').on('keypress', function(e) {
     if (e.keyCode == 13) {
       const newTask = $(this).val();
       if (newTask) {
          const label = document.createElement('label')
          label.innerText = newTask;

            const checkbox = document.createElement('input');
          checkbox.name = 'checkbox';
          checkbox.type = 'checkbox';
          checkbox.value = newTask;

                    const li = document.createElement('li');
          li.appendChild(checkbox);
          li.appendChild(label);
                    $('#tasksUL').append(li);
          $(this).val("");
       }
     }
   });
 });

Answer 3

try this...

 $(() => { $('input').on('keypress', function(e) { if (e.keyCode == 13) { const newTask = $(this).val(); if (newTask) { var li = $("<li><input type='checkbox'<label>" + newTask + "</label></li>"); $('#tasksUL').append(li); $(this).val(""); } } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask"> <ul id="tasksUL"> <li><input type="checkbox"><label>test</label></li> </ul>