title: Insert div into random location inside a container of divs
body: <p><strong>How do I insert a div into a random location inside a container of divs?</strong> Similar to <a href="https://stackoverflow.com/questions/17238255/insert-a-div-in-a-random-location-in-a-list-of-divs">Insert a div in a random location in a list of divs</a> except I'm not using a list.</p>
  
  <p>Right now it appears inside a random container div, not randomly inside the container itself:</p>
  
  <p><a href="http://jsfiddle.net/frank_o/QXdL3/15/" rel="nofollow noreferrer">http://jsfiddle.net/frank_o/QXdL3/15/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="template" style="display: none;"&gt;
    &lt;div class="image"&gt;
      &lt;img src="http://placekitten.com/75/150"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="main"&gt;
    &lt;div class="image"&gt;
      &lt;img src="http://lorempixel.com/75/150"&gt;
    &lt;/div&gt;
    &lt;div class="image"&gt;
      &lt;img src="http://lorempixel.com/75/150"&gt;
    &lt;/div&gt;
    &lt;div class="image"&gt;
      &lt;img src="http://lorempixel.com/75/150"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var template = $('.template').find('.image').clone(),
    target = $('.main'),
    targetChildren = target.find('.image'),
    random = Math.floor(Math.random() * targetChildren.length);
  
  targetChildren.eq(random).append(template);
  </code></pre>