请教关于JS的排序的问题

Question

现在有这么一组DIV元素：

<div id="id2"></div>

<div id="id5"></div>

<div id="id6"></div>

<div id="id8"></div>

后台某个指令执行成功后，如果返回的数字可能是3，要在id2的后面插入一个新的div（<div id="id3"></div>）；如果返回的是1，要在id2的前面插入一个新的div（<div id="id1"></div>）；如果返回的是7，要在id6的后面插入一个新的div（<div id="id9"></div>）；如果返回的是9，要在id8的后面插入一个新的div（<div id="id9"></div>）；

 

请教该如何写？

Answer 1

/*
*相关于dom的操作全部基于data数组。
*每次获取新的数据后都会刷新全部重建所有的子级div，当数据量过大时会卡顿。
*你的需求最多一百条，亲测不会造成卡顿
*后期的视图层与数据层的其他操作（例如删除）直接对data数组操作即可。
 */
var data =[];//用于存放获取的数据
function getId(){
    let id = Math.floor(Math.random()*100);
    //要添加的div的父级
    var fatherDiv = document.getElementById('fatherDiv');
    //要添加的div的爷爷级
    var parentDiv = fatherDiv.parentNode;
    data.push(id)
    //对data数组进行从小到大的排序
    data.sort((a,b)=>{
        return a - b
    })
    delDom(parentDiv,fatherDiv)
}
function addDom(father) {
    //创建子级div并插入
    for (let i = 0; i < data.length; i++) {
        let childDiv = document.createElement('div');
        childDiv.setAttribute('id',`${data[i]}id`);
        father.appendChild(childDiv);
    }
}
function delDom(parent,oldfather) {
    //删除父级div，同时该父级下的所有子级也会全部清除
    oldfather.remove();
    //创建一个新的父级div
    var newfather = document.createElement('div');
    newfather.setAttribute('id','fatherDiv');
    parent.appendChild(newfather);
    addDom(newfather);
}