Не удалось пометить флажки, отмеченные динамически через javascript

Question

Я создаю приложение todo, используя javascript. Я динамически создаю шаблон для задач, которые я буду вводить в поле ввода. При нажатии Добавить шаблон задачи создается динамически, и этот шаблон содержит название задачи и один флажок. Я попытался изменить проверенное свойство на true. В консоли также отображается значение 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 = '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

Вы, похоже, ищете свойство defaultChecked :

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>

Или используйте функции DOM, такие как appendChild () , чтобы сохранить дочерние узлы вместо внутренних HTML.

Answer 2

после добавления, возьмите элемент и установите флажок;

function updateLists(){
    const parent = document.createElement('div');
   
        const divP = document.createElement('div');
        const div = document.createElement('div');
        div.innerText = "hi there";
        div.style.textDecoration = 'line-through' ;
        divP.className = 'taskdiv';
        divP.id = "aa";
        
        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';
       
        inputEl.id = "bb";
        span2.appendChild(inputEl);
        span2.className = 'checkSpan';
        divP.appendChild(span2);
        span.className = 'taskSpan';
        divP.append(div);
        divP.append(span);
        parent.prepend(divP);
        
        var parentDiv=document.getElementById("xx");
        console.log(parentDiv);
    
    parentDiv.innerHTML = parent.innerHTML;
    console.log(inputEl );
    document.getElementById('bb').checked=true;
}

updateLists()

<div id="xx">x</div>