Как обернуть несколько болков в div без JQuery?

Question

Как обернуть несколько блоков в новый div без использования JQuery?
В JQuery для подобных ситуаций используется wrapInner.

Answer 1

document.querySelector('input').onclick = () => {
  let newWrapper = document.createElement('div');
  newWrapper.classList.add('newWrapper');
  document.querySelectorAll('.item').forEach((item) => newWrapper.appendChild(item))
  document.querySelector('.wrapper').appendChild(newWrapper)
}

.wrapper {
  padding: 10px;
  background: lightblue;
  width: 100px;
}

.newWrapper {
  padding: 10px;
  background: purple;
}

.item {
  background: pink;
  border: 1px dotted black;
}

<input type="button" value="обернуть" />
<div class="wrapper">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

БЛОГ НА HUSL

Как обернуть несколько болков в div без JQuery?

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