如何实现父div下子列表项上下移动，修复list.swap不存在报错

问题原因 #

• parent.children 返回的是动态的HTMLCollection类数组对象，不支持直接通过索引赋值修改元素顺序，也没有内置的swap方法，这是两个报错的根本原因
• 上移逻辑里直接给list[temp]赋值不会触发DOM重排，所以页面没有任何变化
• 下移逻辑调用不存在的swap方法，直接抛出类型错误

修复方案 #

用DOM原生的insertBefore方法实现位置交换即可，不需要操作数组，直接修改DOM节点：

function moveUp(){
    const parent = document.getElementById("answer");
    const activeItem = parent.querySelector(".active");
    // 没有选中项直接返回
    if (!activeItem) return;
    // 拿到上一个兄弟节点
    const prevSibling = activeItem.previousElementSibling;
    if (prevSibling) {
        // 把当前元素插到上一个兄弟节点前面，即实现上移
        parent.insertBefore(activeItem, prevSibling);
    }
}

function moveDown(){
    const parent = document.getElementById("answer");
    const activeItem = parent.querySelector(".active");
    if (!activeItem) return;
    // 拿到下一个兄弟节点
    const nextSibling = activeItem.nextElementSibling;
    if (nextSibling) {
        // 把当前元素插到下一个兄弟节点的下一个节点前面，等价于和下一个兄弟交换位置
        parent.insertBefore(activeItem, nextSibling.nextElementSibling);
    }
}

insertBefore是DOM原生API，会自动把要插入的节点从原有位置移除，再插入到指定位置，不需要手动删除原有节点，比手动操作数组交换更简单高效。

内容的提问来源于stack exchange，提问作者Josh Solders