jQuery - Insert a div between specific elements

Question

HTML:

<div class="row">
   <div class="A"></div>
   <div class="B"></div>
   <div class="C"></div>
   <div class="D"></div>
</div>
<div class="row">
   <div class="A"></div>
   <div class="B"></div>
   <div class="C"></div>
   <div class="D"></div>
</div>

What I want to achieve:

<div class="row">
   <div class="newDiv">
      <div class="A"></div>
      <div class="B"></div>
      <div class="C"></div>
   </div>
   <div class="D"></div>
</div>
<div class="row">
   <div class="newDiv">
      <div class="A"></div>
      <div class="B"></div>
      <div class="C"></div>
   </div>
   <div class="D"></div>
</div>

I tried the next code, Include all in one, ok, but I can not take D out without duplicating content.

jQuery('.row').wrapInner('<div class="newDiv"></div>');

And it is impossible to add HTML without tags close alone.

jQuery('.A').before('<div class="newDiv">')
jQuery('.D').before('</div>')

Answer 1

You can

1) iterate over each row

2) get all div element

3) select first three using .slice(0,3)

4) wrap using .wrapAll():

$('.row').each(function(){
   $(this).find("div").slice(0,3).wrapAll("<div class='newDiv'></div>");
});

Working Demo