如果div嵌套在特定样式下,则使用元素创建div

我不明白为什么我的接替孩子的命令在条件满足之前就下达了。当一个特定的子元素被移动到另一个容器时,我想用另一个适合该容器的元素替换它。这发生在一个检查单击了哪些按钮的函数中。单击复选标记按钮时。它将把整个列表项从名为tasklist的div移动到名为completed的dif。感谢任何帮助。这是我的代码:

function statusCheck(e) {
const item = e.target;

if (item.classList.contains('trash-btn')) {
    const task = item.parentElement.parentElement;
    task.classList.add('vanish');
    task.addEventListener('transitionend', function(){
        task.remove();
    });
}

if (item.classList.contains('check-btn')) {
    let task = item.parentElement.parentElement;
    task.classList.add('complete');
    item.remove();
    completed.appendChild(task);

    task = document.querySelector('.complete');
    const taskItem = document.querySelector('.card-date');
    if (task.classList.contains('complete')) {
        console.log(taskItem);
        const swapTask = taskItem.children[0];
        console.log(swapTask);
        const swapTaskItem = document.createElement('span');
        swapTaskItem.classList.add('text-complete');
        swapTaskItem.innerText = 'Completed: ';
        taskItem.replaceChild(swapTaskItem, swapTask);
    }
}

此图片显示在移动到我完成的div之前已完成。有时它们在Done列中堆叠“Completed:Completed:'”