jquery - array_chunk in Javascript, after Appending a big chunk using ForLoop -

(in edit part @ bottom, have included code got closest)

---

explanation: have ajax post, fetches data controller. on success, have loop each post:

success: function(data) {      var posts = data['data'];      var postscount = data['per_page'];      var frag = document.createdocumentfragment();       for(i=0; < postscount; i++){          frag.appendchild(postelem(posts));      }     document.getelementbyid('content').appendchild(frag); } 

i have function function postelement() creates eachpost div, appends child divs eachpost , returns it

function postelem(posts){    var eachpost = document.createelement('div');    eachpost.classname = "col-md-4 eachpost";         //and big chunk of code appends `eachpost`.    return eachpost; } 

this works until here

the structure got working in html, , want achieve in javascript looks this:

<div id="content">    @foreach (array_chunk($posts->all(), 3) $row)       <div class="row eachrow">          @foreach($row $post)             <div class="col-md-3 eachpost">                    <!-- rest of code --> 

after research, figured out can achieve array_chunk this:

var n,j,temparray,chunk = 3; (n=0,j=posts.length; n<j; n+=chunk) {    temparray = posts.slice(n,n+chunk);        // other `for`.  } 

however, whatever tried, couldn't figure out how can achieve achieved in html. couldn't import eachrow bit in javascript. way of doing it? because of document.createdocumentfragment() bit?

---

edit: tried, fails want achieve:

success: function(data) {      var posts = data['data'];      var postscount = data['per_page'];      var frag = document.createdocumentfragment();      var eachrow = document.createdocumentfragment();      var n,j,temparray,chunk = 3;          (n=0,j=posts.length; n<j; n+=chunk) {             temparray = posts.slice(n,n+chunk);                for(i=0; < temparray.length; i++){                  frag.appendchild(postelem(temparray));              }              var eachrow = document.createelement('div');             eachrow.classname = "row eachrow";             eachrow.appendchild(frag);          }     document.getelementbyid('content').appendchild(eachrow); } 

in part, appends stuff in frag. creates div. (see bottom view:source)

this creates post inside each row, , it's straight line of posts, instead of 3 posts in 1 row.

• what want achieve

  <div class="row eachrow">    <div class="eachpost>_</div>    <div class="eachpost>_</div>    <div class="eachpost>_</div> </div> <div class="row eachrow">    <div class="eachpost>_</div>    <div class="eachpost>_</div>    <div class="eachpost>_</div> </div> 

• the code @ top producing:

  <div class="row eachrow">_</div>      <div class="row eachrow">_</div>   <!-- each bit --> <div class="eachpost>_</div> <div class="eachpost>_</div> <div class="eachpost>_</div> 

• code in edit part producing:

  <div class="row eachrow">    <div class="eachpost>_</div>  </div> <div class="row eachrow">    <div class="eachpost>_</div>  </div> <div class="row eachrow">    <div class="eachpost>_</div>  </div>