Tengo este DOM :
<div class="section">Section</div> <div>Text</div> <div>Image</div> <div>Text</div> <div>Gallery</div> <div class="section">Section</div> <div>Text</div> <div>Image</div> <div>Text</div> <div>Gallery</div>pero quiero envolver los elementos de esta manera:
<div class="relative"> <div class="section">Section</div> <div>Text</div> <div>Image</div> <div>Text</div> <div>Gallery</div> </div> <div class="relative"> <div class="section">Section</div> <div>Text</div> <div>Image</div> <div>Text</div> <div>Gallery</div> </div>Así que probé esto:
function getSiblings(elm, withTextNodes) { if (!elm || !elm.parentNode) return let siblings = [ ...elm.parentNode[withTextNodes ? 'childNodes' : 'children'], ], idx = siblings.indexOf(elm) siblings.before = siblings.slice(0, idx) siblings.after = siblings.slice(idx + 1) return siblings } const sections = document.querySelectorAll('.section') sections.forEach((section) => { const elmSiblings = this.getSiblings(section) // children elements to be wrapped inside the wrapper const children = elmSiblings.before const wrapper = document.createElement('div') wrapper.classList.add('section-wrapper') section.parentNode.insertBefore(wrapper, section) wrapper.appendChild(section) }) pero esto solo envuelve el elemento 'sección' dentro del section-wrapper recién creado
¿Cómo puedo conseguir esto?
Algo como esto, probando el nextElementSibling
document.querySelectorAll(".section").forEach(sec => { let next = sec.nextElementSibling; // important to get this before wrapping const wrapper = document.createElement("div") wrapper.classList.add("relative") sec.insertAdjacentElement("beforeBegin", wrapper) wrapper.append(sec); while (next && !next.classList.contains("section")) { const nextSib = next.nextElementSibling; // important to get this before appending wrapper.append(next) if (nextSib) next = nextSib; else next = null } }) .relative { background-color: red } .section { background-color: yellow } <div class="section">Section1</div> <div>Text 1</div> <div>Image 1</div> <div>Text 2</div> <div>Gallery 1</div> <div class="section">Section2</div> <div>Text 2.1 </div> <div>Image 2</div> <div>Text 2.2</div> <div>Gallery 2</div>