javascript - 如何换行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>