如何通過 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";
});