Как обернуть дивом несколько элементов?

Question

Имею:

<div id="slider" class="slider">
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
</div>

Таких <div class="wow-ggg"></div> более сотни. Мне их нужно обернуть в свой див разными группами в разных количествах.

Для этого хочу использовать:

const items = [...document.querySelectorAll('.item')];

const div1 = document.createElement('div');
document.body.append(div1); // вставляем див, куда нужно
div1.append(...items.slice(0, 5));

const div2 = document.createElement('div');
document.body.append(div2); // вставляем див, куда нужно
div2.append(...items.slice(5, 10));

..... и так далее

Но это работает для класса БЕЗ ЧЕРТЫ. Т.е для .item, а у меня класс .wow-item, т.е. из-за этого"дефиса" все ломается. Как с этим бороться?

Как адаптировать скрипт под мой html?

Answer 1

Всё работает:

const items = [...document.querySelectorAll('.wow-ggg')];

const div1 = document.createElement('div');
div1.classList.add('test');
document.body.append(div1); // вставляем див, куда нужно
div1.append(...items.slice(0, 5));

const div2 = document.createElement('div');
div2.classList.add('test');
document.body.append(div2); // вставляем див, куда нужно
div2.append(...items.slice(5, 10));

.test {
   border: 1px solid red;
   margin: 2px;
}

.wow-ggg {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  margin: 2px;
}

<div id="slider" class="slider">
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
</div>

БЛОГ НА HUSL

Как обернуть дивом несколько элементов?

Ответы (1 шт):