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](https://stackoverflow.com/questions/17238255/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: 
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>

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