title: Insert a div in a random location in a list of divs
body: <p>I have a page that looks like so: </p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div class="item"&gt;...&lt;/div&gt;
    &lt;div class="item"&gt;...&lt;/div&gt;
    &lt;div class="item"&gt;...&lt;/div&gt;
    &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I was wondering if there is a way that I could insert a div <strong>randomly</strong> between any of the "item" divs, so when the page is loaded, it would look like: </p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div class="item"&gt;...&lt;/div&gt;
    &lt;div class="item"&gt;...&lt;/div&gt;
    &lt;div class="rondomDiv"&gt;...&lt;/div&gt;
    &lt;div class="item"&gt;...&lt;/div&gt;
    &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All the divs with the "item" class are dynamically generated, and cannot be modified. Any ideas?
  Thanks in advance!</p>