How to wrap using javascript

September 16, 2022

How to wrap global-text and button by creating a div.

<div class="content">
      <div class="fl-module global-button"> </div>
      <div class="fl-module global-text"> </div>
      <div class="fl-module button"> </div>
      <div class="fl-module text"> </div>
</div>

>Solution :

Create an element and append it to the place you want it. Select the elements you want to be in that element and append them to that new div.

//Select the elements you want inside
const divs = document.querySelectorAll(".global-button, .global-text");

// create the div to wrap your elements
const wrapper = document.createElement("div");

// add it to the DOM
divs[0].before(wrapper);

// insert the elements into the newly created div
divs.forEach(div => wrapper.append(div));

div {
  padding: 2em;
  margin: .4em;
  border: 1px solid black;
  min-height: 2em;
}

<div class="content">
  <div class="fl-module global-button">a</div>
  <div class="fl-module global-text">b</div>
  <div class="fl-module button">c</div>
  <div class="fl-module text">d</div>
</div>

If you have multiple of these, you need to do it slightly different

function wrapIt(parentElem, selectors) {

  //Select the elements you want inside
  const divs = parentElem.querySelectorAll(selectors);

  // create the div to wrap your elements
  const wrapper = document.createElement("div");

  // add it to the DOM
  divs[0].before(wrapper);

  // insert the elements into the newly created div
  divs.forEach(div => wrapper.append(div));
}

var contents = document.querySelectorAll(".content");
contents.forEach((content) => wrapIt(content, ".global-button, .global-text"));

div {
  padding: 2em;
  margin: .4em;
  border: 1px solid black;
  min-height: 2em;
}

<div class="content">
  <div class="fl-module global-button">a</div>
  <div class="fl-module global-text">b</div>
  <div class="fl-module button">c</div>
  <div class="fl-module text">d</div>
</div>
<div class="content">
  <div class="fl-module global-button">a</div>
  <div class="fl-module global-text">b</div>
  <div class="fl-module button">c</div>
  <div class="fl-module text">d</div>
</div>
<div class="content">
  <div class="fl-module global-button">a</div>
  <div class="fl-module global-text">b</div>
  <div class="fl-module button">c</div>
  <div class="fl-module text">d</div>
</div>