How to wrap contents of a div

Question

I have a div that looks like this:

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

I'd like to do this using JavaScript:

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

I did a quick Google search, but couldn't find what I was looking for. Is there a simple way to do this in JavaScript or jQuery?

EDIT

The current answer wraps all the contents in a div rather than just wrapping all the contents all together in one div.

Current code:

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

What I want achieved:

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

Does this answer your question? [Pure javascript method to wrap content in a div](https://stackoverflow.com/questions/6838104/pure-javascript-method-to-wrap-content-in-a-div) — Ali Kleit, May 04 '20 at 05:52

palaѕн · Accepted Answer · 2020-05-04T07:37:46.493

3

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>

To wrap just the outer div of contents, you can use .wrapInner() method like:

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

edited May 04 '20 at 07:37

answered May 04 '20 at 05:33

palaѕн

72,112
17
116
136

Hmm, it seems like this will wrap all the contents in the div, can't I wrap just the outer div of contents? – user2896120 May 04 '20 at 07:10
We can. Please update your post with a simple example and what happens now with current code and what is the expected output also. – palaѕн May 04 '20 at 07:25
Code updated. Also, if you have any further issues, please create a separate question for that, so that there is a separation of concern and future users can get specific answers for a specific issue while searching SO. I hope that makes sense. – palaѕн May 04 '20 at 07:39

brk · Answer 2 · 2020-05-04T05:38:24.087

Use jquery wrap 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>

Alternatively you can use pure javascript and use innerHTML

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>

How to wrap contents of a div

2 Answers2