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>';
>Solution :
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>