Javascript 如何将一个div添加到另一个div中但处于随机位置

我正在动态创建div，希望它们以随机位置（而不是最后一个位置）添加到父div中，例如

                        var opt = document.createElement("div");
                        var txt = document.createTextNode(str);
                        opt.appendChild(txt);


                        //get the top and left positioning of the elements
                        var x = Math.floor(Math.random() * (400));
                        var y = Math.floor(Math.random() * (50));

                        opt.style.top = y + "px";
                        opt.style.left = x + "px";
                        opt.style.zIndex = zindex;   

                        $("#parentDiv").append(opt);

---

但问题是jquery的append函数或add函数将div放在堆栈的最后一个位置。我希望它随机放在其他div之间…如果已经有div，请提供帮助：

var i = Math.round(Math.random() * $('#parentDiv').length);
if (i != $('#parentDiv div').length) $('#parentDiv div').eq(i).before(opt);
else $('#parentDiv div').eq(i - 1).after(opt);

---

编辑我将其清理干净，以便将无子项/最后一个子项案例合并在一起。

您的意思是最后添加的div“位于”其他div之上，还是最后添加的div被添加到文档末尾？完全重复-尝试添加opt.style.position=“relative”；这仍然无法处理将第一个孩子插入家长的问题。@S.McGrady请接受另一个答案，以便我可以删除此内容one@S.McGrady但你接受了另一个答案？！[调用

$（'parentDiv'）

或

$（'parentDiv'）

至少三次，这是不完整、错误的，也违反了DRY原则]

var $parent = $('#parentDiv');
var $children = $parent.children();             // get possible children
var n = $children.length;                       // there are n children
var pos = Math.floor((n + 1) * Math.random());  // and n+1 insert points

if (n === pos) {
    $parent.append(opt);                        // append after last
} else { 
    $children[pos].before(opt);                 // or insert before
}