0

How can I create and append a div with parent's child div content?

My current content is:

<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>

How can I do like this way:

<div class="main">
  <div class="wrapper">
    <div class="sub">1</div>
    <div class="sub">2</div>
    <div class="sub">3</div>
  </div>
</div>

My javascript code is:

let main = document.querySelector(".main");
let div = document.createElement("div");
div.className = "wrapper";
//main.appendChild(div);
//main.insertBefore(div, main.children[0]);
//main.insertBefore(div, main.nextElementSibling); 
//main.insertBefore(div, main.firstChild);
//I don't want do in this way:
//main.innerHTML = '<div class="wrapper">'+main.innerHTML+'</div>';
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Serkan
  • 5
  • 1

1 Answers1

0

Method 1

// Get the main container element
var mainContainer = document.querySelector('.main');

// Create a new wrapper element and wrap the main content (subs)
var wrapperElement = `<div class="wrapper">${mainContainer.innerHTML}</div>`

// Update the main container
mainContainer.innerHTML = wrapperElement;
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>

Method 2

// Get the main container element
var mainContainer = document.querySelector('.main');

// Create a new wrapper element
var wrapperElement = document.createElement('div');
wrapperElement.classList.add('wrapper');

// Remove the sub elements from the main container
var subElements = Array.from(mainContainer.getElementsByClassName('sub'));
subElements.forEach(function(subElement) {
  mainContainer.removeChild(subElement);
});

// Append the wrapper to the main container
mainContainer.appendChild(wrapperElement);

// Append the sub elements to the wrapper
subElements.forEach(function(subElement) {
  wrapperElement.appendChild(subElement);
});
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>

Method 3

// Get the main container element
var mainContainer = document.querySelector('.main');

// Create a new wrapper element
var wrapperElement = document.createElement('div');
wrapperElement.classList.add('wrapper');

// Move the existing sub elements into the wrapper
var subElements = mainContainer.querySelectorAll('.sub');
subElements.forEach(function(subElement) {
  wrapperElement.appendChild(subElement);
});

// Append the wrapper to the main container
mainContainer.appendChild(wrapperElement);
<div class="main">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="sub">3</div>
</div>
001
  • 2,019
  • 4
  • 22