komned37,
...
обернуть попарно
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
padding: 5px 5px 0 5px;
margin-bottom: 5px;
min-height: 20px;
}
.container {
border: 2px solid red;
}
.item-box {
border: 2px solid green;
}
.item {
background: blue;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function wrapEach(element, wrapper, countToWrap, cls){
var container;
[].forEach.call( document.querySelectorAll(element), function(el,i) {
i % countToWrap || (container = document.createElement(wrapper),
cls && container.classList.add(cls),
el.parentNode.replaceChild(container,el));
container.appendChild(el);
});
}
wrapEach('.item','div',2,'item-box');
})
</script>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>