使用 vanilla JavaScript 根据索引移动元素

Question

我想根据索引移动我的元素（待办事项列表中的任务）。如果指数增加，则div向下移动；如果下降，则div上升。我了解的功能insertBefore和insertAfter，但不幸的是，我不知道如何使用它们。

var task = [];

function newElement(newChild) {

    let btnDel = document.createElement("button");

    btnDel.className = "fa fa-trash-o";

    let myEd = document.getElementById("myEdit");

    let spanClose1 = document.getElementsByClassName("close1")[0];

    let spanRedact = document.getElementsByClassName("redact")[0];

    let myDel = document.getElementById("myDelete");

    let spanClose = document.getElementsByClassName("close")[0];

    let spanYes = document.getElementsByClassName("yes")[0];

    // Create button

    let divWithBut = document.createElement("div");

    divWithBut.className = "forButt";

    let btnRedact = document.createElement("button");

    btnRedact.className = "fa fa-pencil";

    // Redact but

    btnRedact.onclick = function() {

        myEd.style.display = "block";

        let editText = document.getElementById("editText");

        let divWithText = divWithBut.parentElement.getElementsByClassName("todoPost")[0];

        editText.value = divWithText.innerHTML;

        editText.currentTarget;

        spanRedact.onclick = function() {

            divWithText.textContent = editText.value;

            divWithText.className = "todoPost";

            myEd.style.display = "none";

        };

        spanClose1.onclick = function() {

            myEd.style.display = "none";

        };

    }

    /*************************** */

    /* Done but */

    let doneBut = document.createElement("button");

    doneBut.className = "fa fa-check-circle-o";

    doneBut.onclick = function() {

        let divWithText = divWithBut.parentElement.getElementsByClassName("todoPost")[0];

        divWithText.classList.toggle("checked");

    }