обернуть все элементы определенного div

$('.button').wrapInner('<div class="button-bg"></div>');

.button { 
  padding: 2px; 
  border: 1px solid #ccc; 
  display: inline-block; 
  font-family: monospace; 
} 
 
.button .button-bg { 
  background: #ccc; 
  padding: 2px 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="button"> 
  text 
</div>

$('.block').wrapInner('<div class="new" />');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
</div>

$('.block > div').wrapAll('<div class="new" />');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
</div>

var item = document.querySelectorAll('.item'); 
for (var i = 0; i < item.length; i++) { 
  item[i].outerHTML = '<div class="wrap">' + item[i].outerHTML + '</div>'; 
}

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.item { 
  padding: 5px; 
  background: #f7f7f7; 
  border: 1px solid #ccc; 
} 
 
.wrap { 
  border: 1px solid #f00; 
  margin-bottom: 5px; 
  padding: 5px; 
}

<div class="items"> 
  <div class="item">1</div> 
  <div class="item">2</div> 
  <div class="item">3</div> 
</div>