How add a div inside Another div but in a random position

Question

I am creating divs dynamically and would want them added to the parent div in random positions not in the last position e.g.

                        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);

But problem is jquery's append function or add function puts the div in the last position on the stack. i want it put randomly between other divs...help

Do you mean that the div you last added lays 'on top of' the others or do you mean that the last added div gets added to the end of the document? — Tom Naessens, Aug 23 '12 at 11:12
Exact duplicate - http://stackoverflow.com/questions/8002627/append-content-on-random-location-with-jquery — Dipak, Aug 23 '12 at 11:15

Alnitak · Answer 1 · 2012-08-23T11:25:30.160

3

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
}

EDIT I cleaned this up to merge together the no-children / last child case.

edited Aug 23 '12 at 11:25

answered Aug 23 '12 at 11:15

Alnitak

334,560
70
407
495

1

@S.McGrady but you accepted the other answer?! [which is incomplete, wrong, and also violates the DRY principle by calling `$('#parentDiv')` or `$('#parentDiv div')` at least three times?] – Alnitak Aug 23 '12 at 12:53

Danil Speransky · Accepted Answer · 2012-08-23T11:24:02.483

0

If there is already 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);

edited Aug 23 '12 at 11:24

answered Aug 23 '12 at 11:15

Danil Speransky

29,891
5
68
79

this still won't cope with inserting the _first_ child into the parent. – Alnitak Aug 23 '12 at 11:28

How add a div inside Another div but in a random position

2 Answers2