jquery - insert element after another with multiple containers -

i have following html:

<div class="div one">  <div class="text">one</div>  <svg>object</svg> </div> <div class="div two">  <div class="text">two</div>  <svg>object</svg> </div> <div class="div three">  <div class="text">three</div>  <svg>object</svg> </div> 

and insert text div after svg object, using this:

$('.div .text').each(function(){  $(this).insertafter('.div svg'); }); 

but output like: codepen

<div class="div one">  <svg>object</svg>  <div class="text">three</div>  <div class="text">two</div>  <div class="text">one</div> </div> <div class="div two">  <svg>object</svg>  <div class="text">three</div>  <div class="text">two</div>  <div class="text">one</div> </div> <div class="div three">  <svg>object</svg>  <div class="text">three</div>  <div class="text">two</div>  <div class="text">one</div> </div> 

i suppose each() select each element inside div, not elements , repeat them after target element.

you need find sibling svg element current .div .text element , insert after that. try this:

$('.div .text').each(function() {   $(this).siblings('svg').after(this); }); 

updated codepen