how to insert DOM element just after the div clicked

Question

I've my mark up as

<div id="wrap">
   <div class="clickhere"></div>
   <div class="clickhere"></div>
   <div class="clickhere"></div>
   <div class="clickhere"></div>
   <div class="clickhere"></div>
</div>

Now, I want to add another <div class="clickhere"></div> just after the div clicked using jQuery. I thought of .append() or .prepend() but it only adds at the last or the first of the parent element (if applied at the parent element).

$('.clickhere').click(function(){
   // add <div class="clickhere"></div> just below $(this)
})

Answer 1

你有.insertAfter() :)

$('<div class="clickhere"></div>').insertAfter(this);

Answer 2

And in something approaching POJS:

> $('.clickhere').click(function(){

  var div = document.createElement('div');
  div.className = 'clickhere';
  this.parentNode.insertBefore(div, this.nextSibling);

> just below $(this) })