How to wrap every n'th div using plain javascript

Question

I have achieved this with jQuery, but I am looking for a solution with plain JavaScript. I have a div structure like this -

<div class="parent">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>
<div class="parent">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>

... and so on

Now, I want to wrap every nth div inside every .parent div. Like this -

<div class="parent">
    <div class="wrapper">
        <div>content</div>
        <div>content</div>
    </div>
    <div class="wrapper">
        <div>content</div>
        <div>content</div>
    </div>
    <div class="wrapper">
        <div>content</div>
        <div>content</div>
    </div>
</div>

... and so on

Any help will be appreciated. I have tried something like this and stuck with no further clue -

// forEach function
var forEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]); // passes back stuff we need
    }
}

// select all .parent divs
var parentDivs = document.querySelectorAll('.parent');

//slicing the array
var chunk = function ( array, size ) {
  var arr = [];
  for ( var i = 0; i < array.length; i += size ) {
      var newSlicedArray = Array.prototype.slice.call( array, i, i + size );
      Array.prototype.push.apply(arr, newSlicedArray);
  }
  return arr;
}

//run foreach function
forEach(parentDivs, function (index, value) {

  var childrens = value.querySelectorAll("div");

  var final = chunk(childrens,1);
  console.log(final);

});

Answer 1

Your prototype call was unnecessary for the push. It's a native array and not a DOM element. Added code to map the arrays to arrays of DOM elements, accumulate and append them to a new DOM elements and remove from parent using reduce, and then append back to the original element.

 // forEach function var forEach = function (array, callback, scope) { for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); // passes back stuff we need } } // select all.parent divs var parentDivs = document.querySelectorAll('.parent'); //slicing the array var chunk = function ( array, size ) { var arr = []; for ( var i = 0; i < array.length; i += size ) { var newSlicedArray = Array.prototype.slice.call( array, i, i + size ); arr.push(newSlicedArray); } return arr; } //run foreach function forEach(parentDivs, function (index, value) { var childrens = value.querySelectorAll("div"); var final = chunk(childrens,3); final.map( towrap => towrap.reduce( (acc, el) => (acc.appendChild(el),acc), document.createElement('div') ) ).forEach( el => { el.className ="wrap"; value.appendChild(el) }) });

 .wrap { border: 1px solid green }

 <div class="parent"> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> </div> <div class="parent"> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> </div>

Answer 2

With the following method, we count each element using querySelectorAll by using the "parent" class.

We then use a loop to modify each instance of the element.

1. Grab the current content inside of the parent class
2. Remove the current content
3. Create your wrapper, and fill it with the content we stored
4. Finally, add the wrapper inside of your parent.

 window.onload = function() { // Run after the page has loaded let p = document.querySelectorAll('.parent'); for (let i = 0; i < p.length; i++) { if (i % 2) { // select every second instance let content = p[i].innerHTML; // store the content p[i].innerHTML = ''; // remove content from inside.parent let c = document.createElement('div'); // Create the wrapper c.className = 'wrapper'; c.innerHTML = content; // Put the content inside of the wrapper p[i].appendChild(c); // Add wrapper inside of the.parent } } }

 .wrapper { border: solid 1px blue }

 <div class="parent"> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> </div> <div class="parent"> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> </div>