JavaScript移除d-none类后控制台正常但DOM未显示如何解决

TODO待办应用中新增计数器统计待办条目总数，预期逻辑为计数器数值归0时，显示无任务提示文本：You currently have no tasks. Use the input field above to start adding.
对应逻辑代码：

if(count === 0){
  noTasksText.classList.remove('d-none');
}

代码运行后出现异常：控制台打印目标div元素时，可看到其classList已移除d-none类，符合代码执行预期，但实际页面渲染的DOM中该元素仍带有d-none类，提示文本始终无法显示。计数器归零时其余逻辑（如console打印、本地存储更新）均可正常触发，仅该元素的显示状态无法按预期修改。

核心bug来自innerHTML +=的DOM重写机制：

• 页面初始化时，noTasksText变量保存的是初始DOM树中.js-no-tasks元素的引用
• 每次新增待办项执行todoContainer.innerHTML += markup时，浏览器会先将todoContainer下所有现有DOM序列化为HTML字符串，拼接新的待办项 markup 后，重新解析为全新的DOM节点渲染到页面
• 此时容器内原有的.js-no-tasks元素已经被新解析的同名节点替换，noTasksText变量中保存的是已经脱离当前DOM树的游离旧节点
• 后续所有针对noTasksText的class修改，操作的都是这个不在页面渲染树里的旧节点，控制台打印的也是这个旧节点的状态，和页面上实际显示的新节点没有关联，自然看不到显示效果变化。

二选一即可：

• 方法1：替换节点追加方式，避免重写现有DOM
  将所有todoContainer.innerHTML += markup替换为todoContainer.insertAdjacentHTML('beforeend', markup)。insertAdjacentHTML只会在容器末尾插入新节点，不会重写容器内已存在的DOM元素，初始获取的noTasksText引用不会失效。需要替换两处：页面加载时恢复本地存储待办的循环逻辑、新增待办项的提交逻辑。
• 方法2：每次操作提示元素前重新获取DOM引用
  如果不想修改节点追加逻辑，在每次修改noTasksText的class前，重新执行document.querySelector('.js-no-tasks')获取当前页面上渲染的最新节点，再执行class操作即可。

额外优化提示：当前单独维护的count变量和tasks数组的长度完全同步，手动维护计数容易出现增减不同步的bug，直接判断tasks.length === 0作为无任务的判断条件更可靠。

const mainInput = document.querySelector('#main-input');
const todoContainer = document.querySelector('#todo-container');
const errorText = document.querySelector('#js-error');
const noTasksText = document.querySelector('.js-no-tasks')

let tasks = [];

// 页面加载逻辑
window.onload = () => {
  mainInput.focus();
  const storedTasks = JSON.parse(localStorage.getItem('tasks'));

  if (storedTasks?.length > 0) {
    noTasksText.classList.add('d-none');
    tasks = storedTasks;

    tasks.forEach(task => {
      const markup = `
        <div class="js-single-task single-task border-bottom pt-2 pb-2">
          <div class="row">
            <div class="col d-flex align-items-center js-single-task-name">
              <h5 class="mb-0" data-title="${task}">${task}</h5>
            </div>
            <div class="col d-flex justify-content-end">
              <button class="js-remove-task d-block btn btn-danger">Remove Item</button>
            </div>
          </div>
        </div>`;
      todoContainer.insertAdjacentHTML('beforeend', markup);
    });
  } else {
    noTasksText.classList.remove('d-none');
  }
};

// 新增待办逻辑
mainInput.addEventListener("keydown", e => {
  if (!errorText.classList.contains('d-none')) {
    errorText.classList.add('d-none');
  }

  if (e.key === "Enter") {
    const inputValue = mainInput.value.trim();
    if (inputValue) {
      const markup = `
        <div class="js-single-task border-bottom pt-2 pb-2">
          <div class="row">
            <div class="col d-flex align-items-center js-single-task-name">
              <h5 class="mb-0" data-title="${inputValue}">${inputValue}</h5>
            </div>
            <div class="col d-flex justify-content-end">
              <button class="js-remove-task d-block btn btn-danger">Remove Item</button>
            </div>
          </div>
        </div>`;

      noTasksText.classList.add('d-none');
      todoContainer.insertAdjacentHTML('beforeend', markup);

      tasks.push(inputValue);
      localStorage.setItem("tasks", JSON.stringify(tasks));
      mainInput.value = '';
    } else {
      errorText.classList.remove('d-none');
    }
  }
});

// 删除待办逻辑
todoContainer.addEventListener('click', (e) => {
  const buttonIsDelete = e.target.classList.contains('js-remove-task');
  if (buttonIsDelete) {
    const taskEl = e.target.closest('.js-single-task');
    const taskName = taskEl.querySelector('.js-single-task-name h5').dataset.title;
    taskEl.remove();

    tasks = tasks.filter(item => item !== taskName);
    localStorage.setItem("tasks", JSON.stringify(tasks));

    if (tasks.length === 0) {
      noTasksText.classList.remove('d-none');
    }
  }
});

配套CSS无需修改，原有HTML结构保持不变即可正常运行。

内容的提问来源于stack exchange，提问作者Tom Durkin