Not able to mark checkboxes checked dynamically through javascript

Question

I am making a todo app using javascript. I am dynamically creating a template for tasks that i will be entering in a input box. On clicking add task template is created dynamically and that template contains the name of task and one checkbox. I tried changing the checked property to true. In console also its showing true but in web browser checkbox is not checked

Here is my code for dynamically adding task

function updateLists(tasks){
    const parent = document.createElement('div');
    tasks.forEach((task,index)=>{
        const divP = document.createElement('div');
        const div = document.createElement('div');
        div.innerText = task.task;
        div.style.textDecoration = task.completed ? 'line-through' : 'none';
        divP.className = 'taskdiv';
        divP.id = index;
        const span = document.createElement('img');
        span.src = 'trash.svg';
        span.className = 'taskSpan'
        const span2 = document.createElement('span');
        const inputEl = document.createElement('input');
        inputEl.type = 'checkbox';
        inputEl.className = 'checkbox';
        console.log(task.completed);
        inputEl.checked = true;
        span2.appendChild(inputEl);
        span2.className = 'checkSpan'
        divP.appendChild(span2);
        span.className = 'taskSpan'
        divP.append(div);
        divP.append(span);
        parent.prepend(divP);
    })
    parentDiv.innerHTML = parent.innerHTML;
}

Answer 1

You seem to be looking for the defaultChecked property:

var parentDiv = document.getElementById('tasks');

updateLists([{task: 'pending', completed: false}, {task: 'completed', completed: true}]);

function updateLists(tasks){
    const parent = document.createElement('div');
    tasks.forEach((task,index)=>{
        const divP = document.createElement('div');
        const div = document.createElement('div');
        div.innerText = task.task;
        div.style.textDecoration = task.completed ? 'line-through' : 'none';
        divP.className = 'taskdiv';
        divP.id = index;
        const span = document.createElement('img');
        span.src = 'https://via.placeholder.com/15';
        span.className = 'taskSpan'
        const span2 = document.createElement('span');
        const inputEl = document.createElement('input');
        inputEl.type = 'checkbox';
        inputEl.className = 'checkbox';
        console.log(task.completed);
        inputEl.checked = task.completed;
        inputEl.defaultChecked = task.completed;
        span2.appendChild(inputEl);
        span2.className = 'checkSpan'
        divP.appendChild(span2);
        span.className = 'taskSpan'
        divP.append(div);
        divP.append(span);
        parent.prepend(divP);
    })
    parentDiv.innerHTML = parent.innerHTML;
}

<div id="tasks">tasks</div>

Or use DOM functions like appendChild() to preserve the child nodes instead of innerHTML.