Pure JavaScript Method to Wrap Content in a Div

Pure javascript method to wrap content in a div

If your "slide"s are always in slidesContainer you could do this

org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;

How to wrap contents of a div

To wrap the contents of wrapper you can simply use .contents() and .wrap() method like:

$(".wrapper").contents().wrap("<div class='contents-wrapper'></div>");

.contents-wrapper {  background: skyblue;  padding:10px;}
.wrapper{  background: #CCC;  padding:20px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrapper">     ...contents...</div>

How to wrap every n'th div using plain javascript

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 functionvar 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 divsvar parentDivs = document.querySelectorAll('.parent');
//slicing the arrayvar 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 functionforEach(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>

Wrapping a set of DOM elements using JavaScript

You can do like this:

// create the container div
var dv = document.createElement('div');
// get all divs
var divs = document.getElementsByTagName('div');
// get the body element
var body = document.getElementsByTagName('body')[0];

// apply class to container div
dv.setAttribute('class', 'container');

// find out all those divs having class C
for(var i = 0; i < divs.length; i++)
{
   if (divs[i].getAttribute('class') === 'C')
   {
      // put the divs having class C inside container div
      dv.appendChild(divs[i]);
   }
}

// finally append the container div to body
body.appendChild(dv);

Wrap <a> around <div> without jQuery

You can create a new link Element, copy the HTML of the DIV into the link and then insert the link element into the DOM using insertBefore

  function moveToLink(){    var div = document.getElementById('wrapMe');        var link = document.createElement('a');    link.innerHTML = div.outerHTML;    link.setAttribute('href', '#');        div.parentNode.insertBefore(link, div);    div.remove();  }

<div id="wrapMe">Some content in a div</div><input type="button" value="try me" onclick="moveToLink()">

Pure JS, groups of 3 wrap in rows and inser into DOM

You are selecting the block elements from the DOM, but they don't aren't appended to the DOM yet, so that will always come up empty.

const blocks = [...document.querySelectorAll('track__blocks')]

It might be easier to add your figure and img elements in the first loop when creating the rows and blocks. Add a second loop, like you do in the end of your code, and add the figures and images to each block when you create them.

for (let team of groupedTeams) {
  const row = document.createElement('div')
  row.classList.add('track')

  const block = document.createElement('div')
  block.classList.add('track__block')

  for (let item of team) {
    const figure = document.createElement('figure')
    figure.className = 'track track__block grid grid--team__track__block'

    const image = new Image()
    image.className = 'image image--lazy image--w320 track__block grid--team__track__block--image'
    image.src = item

    figure.append(image)
    block.append(figure)
  }

  container.appendChild(row)
  row.appendChild(block)
}

Wrap an element like wrap() function in jQuery, with pure JS

How about:

function fixjsf(){
    var parent = document.getElementsByClassName("af-button-group-justified");
    var elementsCount = parent.length;
    for(var i=0; i<elementsCount; i++){
        var children = parent[i].getElementsByTagName("button");
        for(var j=0; j < children.length; j++){
            var child = parent[i].removeChild(children[0]);
            var wrap = document.createElement("div");
            wrap.className = "gp";
            wrap.appendChild(child);
            parent[i].appendChild(wrap);
        }
    }
}

http://jsfiddle.net/7vhfvakL/7/

for each parent, we grab all the buttons under it (alternatively you could select by class name) and then we remove each child, create a wrapper div, attach the child to the wrapper and attach the wrapper back to the parent.

Or...you could just use the wrap function in jQuery.

Wrapping element inside div

Create a new wrapper element, insert it before the node you want to wrap, and then append the node to the wrapper:

var target = document.querySelector('.target');
var wrapper = document.createElement('div');wrapper.classList.add('wrapper');
target.parentNode.insertBefore(wrapper, target);
wrapper.appendChild(target);

div div:not(:last-child) {  margin-bottom: 2px;}
.child {  width: 100px;  height: 50px;  border: 2px solid red;}
.wrapper {  width: 100px;  height: 50px;  border: 2px solid gold;}
.wrapper > .child {  width: 96px;  height: 46px;}

<div>  <div class="child"></div>  <div class="child"></div>  <div class="child target"></div>  <div class="child"></div></div>

Pure JavaScript Method to Wrap Content in a Div