将div插入div容器内的随机位置

Question

How do I insert a div into a random location inside a container of divs? Similar to Insert a div in a random location in a list of divs except I'm not using a list.

Right now it appears inside a random container div, not randomly inside the container itself:

http://jsfiddle.net/frank_o/QXdL3/15/

HTML:

<div class="template" style="display: none;">
  <div class="image">
    <img src="http://placekitten.com/75/150">
  </div>
</div>
<div class="main">
  <div class="image">
    <img src="http://lorempixel.com/75/150">
  </div>
  <div class="image">
    <img src="http://lorempixel.com/75/150">
  </div>
  <div class="image">
    <img src="http://lorempixel.com/75/150">
  </div>
</div>

JS:

var template = $('.template').find('.image').clone(),
  target = $('.main'),
  targetChildren = target.find('.image'),
  random = Math.floor(Math.random() * targetChildren.length);

targetChildren.eq(random).append(template);

Answer 1

You're almost there. You just need to change append to after ; change:

insertionTargetChildren.eq(random).append(insertionTemplate);

To:

insertionTargetChildren.eq(random).after(insertionTemplate);

Your current code inserts the new div into another div as follows:

<div class="image" style="position: absolute; left: 150px; top: 310px;">
    <img src="http://lorempixel.com/75/150">
  <div class="image" style="position: absolute; left: 225px; top: 310px;">
    <img src="http://placekitten.com/75/150">
  </div>
</div>

The new version will produce the following:

<div class="image" style="position: absolute; left: 150px; top: 310px;">
    <img src="http://lorempixel.com/75/150">
</div>
<div class="image" style="position: absolute; left: 225px; top: 310px;">
  <img src="http://placekitten.com/75/150">
</div>

Answer 2

This will put it in random position:

random = Math.floor(Math.random() * (targetChildren.length+1));
if(random > targetChildren.length){
   target.append(template);
}else{
    targetChildren.eq(random).before(template);
}

The targetChildren.length+1 is to add the possibility of appending in the last place ;)

Answer 3

You were very close!

Instead of .clone() , try using .html() like my example below.

Also, I slightly changed your loop along with the random number generator.

Works very well now. Refresh the page to see three random kitty photos added somewhere within the other images.

WORKING EXAMPLE