Wrapping a set of DOM elements using JavaScript

Admin 1
Viewed 34822

I have a series of p tags on my page and I want to wrap them all into a container, e.g. 

<p>foo</p>
<p>bar</p>
<p>baz</p>

I want to wrap all the above tags into a container as follows:

<div>
    <p>foo</p>
    <p>bar</p>
    <p>baz</p>
</div>

How to wrap a NodeList in an element using vanilla JavaScript?

javascript
6 Answers

Taking @Rixius 's answer a step further, you could turn it into a forEach loop with an arrow function

let parent = document.querySelector('div');
let children = parent.querySelectorAll('*');
let wrapper = document.createElement('section');

wrapper.className = "wrapper";

children.forEach((child) => {
    wrapper.appendChild(child);
});

parent.appendChild(wrapper);
* { margin: 0; padding: 0; box-sizing: border-box; font-family: roboto; }
body { padding: 5vw; }
span,i,b { display: block; }

div { border: 1px solid lime; margin: 1rem; }
section { border: 1px solid red; margin: 1rem; }
<div>
 <span>span</span>
 <i>italic</i>
 <b>bold</b>
</div>

user_3012500
Related