Javascript how to wrap elements in groups

Question

I have this 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>

but I want to a wrap the elements like this:

<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>

So I tried this:

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)
})

but this only wraps the ´section´ element inside the newly created section-wrapper

how can I achieve this?

Answer 1

Something like this, testing the 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>