如何在与我的段落相同的行上添加一个复选框？

Question

I am trying to add a check box on the same line as my paragraph in my to do list.

I have tried:

let addToDoButtton = document.getElementById('addToDo');
let toDoContainer  = document.getElementById('toDoContainer');
let inputField = document.getElementById('inputField');

addToDoButtton.addEventListener('click', function(){
var  paragraph = document.createElement('p');
var  checkbox  = document.createElement('input');
checkbox.type='checkbox';



paragraph.classList.add('paragraph-styling');
paragraph.innerText = inputField.value;

toDoContainer.appendChild(checkbox);
toDoContainer.appendChild(paragraph);

inputField.value=""
paragraph.addEventListener('click', function () {
    paragraph.style.textDecoration="line-through";
    paragraph.style.color='#5493f7';
    
})
paragraph.addEventListener('dblclick', function(){
    toDoContainer.removeChild(paragraph);
    toDoContainer.removeChild(paragraph)


})

I have also tried:

toDoContainer.appendChild(checkbox) && 
toDoContainer.appendChild(paragraph);

I got this for the output:

Answer 1

Please take a look here

const input = document.createElement('input');
input.id = 'input';
input.type = 'checkbox';

const label = document.createElement('label');
label.htmlFor = 'input';

toDoContainer.append(input, label);