Как обернуть содержимое div

Question

У меня есть div, который выглядит следующим образом:

<div class="wrapper">
     ...contents...
</div>

Я хотел бы сделать это, используя JavaScript:

<div class="wrapper">
  <div class="contents-wrapper">
     ...contents...
  </div>
</div>

Я сделал быстрый поиск в Google, но не мог найти то, что искал. Есть ли простой способ сделать это в JavaScript или jQuery?

РЕДАКТИРОВАТЬ

Текущий ответ оборачивает все содержимое в div, а не просто обтекание все содержимое все вместе в одном div.

Текущий код:

<div class="wrapper">
   <div class="contents-wrapper">
     <div></div>
   </div>
   <div class="contents-wrapper">
     <div></div>
   </div>
</div>

Чего я хочу достичь:

<div class="wrapper">
   <div class="contents-wrapper">
     <div></div>
     <div></div>
  </div>
</div>

Answer 1

Чтобы обернуть содержимое wrapper, вы можете просто использовать .contents() и .wrap(), например:

$(".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>

---

Чтобы обернуть только внешний div содержимого, вы можете использовать метод .wrapInner(), например:

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

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

.wrapper {
  background: #CCC;
  padding: 10px;
}
.inner {
  background: yellow;
  padding: 10px;
  margin-bottom: 5px;
}

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

Answer 2

Использование jquery упаковка API

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

.wrapper {
  background: green;
  color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapped">
  <div> I am wrapped & got style from wrapper div </div>
</div>

В качестве альтернативы вы можете использовать чистую javascript и использовать внутреннюю HTML

let ele = document.getElementsByClassName('wrapped')[0];
let innerContent = ele.innerHTML;
ele.innerHTML = '';
let crtEle = `<div class ="wrapper">${innerContent}</div>`;
ele.innerHTML = crtEle;

.wrapper {
  background: green;
  color: white;
  font-size: 20px;
}

<div class="wrapped">
  <div> I am wrapped & got style from wrapper div </div>
</div>