请教关于JS的排序的问题

现在有这么一组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>）；

请教该如何写？

/*
*相关于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);
}

以为直接按照你的结构来。。按照你最新的要求改了

<div id="container">

</div>
<input type="button" value="插入Div" onclick="insertDiv(rnd(1,9))" />
<script>
    function rnd(min, max) {
        var tmp = min;
        if (max < min) { min = max; max = tmp; }
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    function insertDiv(id) {
        var div = document.createElement('div'),
            container = document.getElementById('container'),
            divs = Array.prototype.slice.call(container.childNodes, 0).filter(el => el.tagName == 'DIV');

        div.id = 'id' + id; div.innerHTML = id + '--' + new Date().toLocaleString();
     
        if (divs.length == 0) container.appendChild(div);
        else {
            var tid = -1;
            for (var i = 0; i < divs.length; i++) {
                var elid = parseInt(divs[i].id.substring(2));
                if (elid <= id) { tid = i; } else break;
            }
            if (tid === -1) container.insertAdjacentElement('afterbegin',div);
            else divs[tid].insertAdjacentElement('afterend', div);
        }
    }
</script>

之前的div的id是通过后台返回来的吗？数据量大吗？每次返回的值都是一个吗？返回值可能重复吗？

整体的前端逻辑是：点击一个按钮，然后post到后台，后台返回一个值，然后开始动态写入div，如果第一个返回来的是3，那就写<div id="id3"></div>；然后再返回来的可能是8，那就是写在3的后面；再返回来的的是0，那就写在3的前面；再返回来的是6，那就写在8的前面；这样以此类推。有可能返回来的可能是跟之前的有重复，那就写在重复的后面（比如又返回来一个3，那就写在第一个3的后面，但一定要在4的前面）。

目前我每次返回来数据，我都会push进一个数组，然后排序。新返回来的数字，我会在这个数组中遍历一下。不过好像还是有bug，会出现已经返回数字了，但没有写入html的情况。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<input type="button" value="加载数据" onclick="addData();" /> 
<div id="parentbox">
</div>
 
<script type="text/javascript">
	var num = 1;
	function addData() {
		var id = Math.floor(Math.random()*10);//随机生成一个id
		var str = "第 "+num+" 次生成id: "+id;
		insertDiv(id,str);
		num++;
	}
	function insertDiv(id,str) {
		var div = document.createElement('div');
		div.id = 'id'+id;
		div.innerHTML = str;
		var arr = document.querySelectorAll("#parentbox > div");
		for (var i = 0; i < arr.length; i++) {
			if (parseInt(id,10) < parseInt(arr[i].id.replace("id",""), 10)) {
				arr[i].insertAdjacentElement('beforebegin', div);
				return;
			}
		}
		document.getElementById("parentbox").appendChild(div);
	}
</script>
 
</body>
</html>