javascript - Insert a div in a random location in a list of divs

Question

I have a page that looks like so:

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

I was wondering if there is a way that I could insert a div randomly between any of the "item" divs, so when the page is loaded, it would look like:

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="rondomDiv">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

All the divs with the "item" class are dynamically generated, and cannot be modified. Any ideas? Thanks in advance!

Answer 1

Try something like below,

var $items = $('#container').find('.item');
var pos = Math.floor(Math.random() * $items.length)

$('.randomDiv').insertAfter($items.eq(pos));