如何在與我的段落相同的行上添加一個復選框？

Question

我正在嘗試在待辦事項列表中與我的段落相同的行上添加一個復選框。

我努力了：

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)


})

我也試過：

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

我為 output 得到了這個：

Answer 1

請看這里

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

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

toDoContainer.append(input, label);