如何通过 ID (javascript) 自动组织动态创建的 div？

Question

我正在构建一个待办事项应用程序，其中一个功能是用户可以为任务“优先级”输入一个数字，这将确定任务相对于其他任务的显示位置。 因此，如果用户将优先级 (ID) 设置为 1，它应该首先显示，依此类推，但如果用户删除说 #1，然后在添加许多其他内容后将其重新添加，它仍应位于顶部它的ID是“1”。

我尝试过的解决方案 -

1 - 创建容器子数组，在该数组上使用.sort() then.forEach() 到 append 它到 tasksBoxesWrapper。 这样做要么不会产生错误消息但不起作用，要么我收到一个错误，我正在尝试 append 一个非节点元素。

这是我能找到的唯一不使用 jquery 的方法。 任何帮助深表感谢。

submitNewTaskbtn.addEventListener("click", function () {
  for (let i = 0; i < 1; i++) {
    const deleteBtn = document.createElement("button");
    const taskWrapper = document.createElement("div");
    const taskName = document.createElement("div");
    const taskDescription = document.createElement("div");
    const dueDate = document.createElement("div");
    const tasksBoxesWrapper = document.getElementById("tasksBoxesWrapper");
    //Appends the individual tasks box to the main container and adds a clas

    if (taskTitleInput.value === "") {
      alert("no");
    } else {
      taskWrapper.id = priorityInput.value;

      taskWrapper.className = "taskBoxes";
      taskWrapper.appendChild(deleteBtn);
      deleteBtn.textContent = "X";
      deleteBtn.className = "deleteBtn";
      deleteBtn.addEventListener("click", function () {
        taskWrapper.remove();
      });
      taskWrapper.appendChild(taskName);
      taskName.textContent = taskTitleInput.value;
      taskName.className = "taskBoxName";
      hide(taskForm);
    }

    if (descriptionInput.value === "") {
      taskDescription.className = "formHide";
    } else {
      taskWrapper.appendChild(taskDescription);
      taskDescription.textContent = descriptionInput.value;
      taskDescription.className = "taskBoxDescription";
    }

    if (dueDateInput.value === "") {
      dueDate.className = "formHide";
    } else {
      taskWrapper.appendChild(dueDate);
      dueDate.textContent = dueDateInput.value;
      dueDate.className = "taskDueBox";
    }
  }

  taskForm.className = "formHide";
});