Wrap every 2 elements in a
tag with js vanilla?

Question

I would like to put every two li elements into a div in vanilla js. But I don't know wher is problem.

Thnks for help!

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>


const items = [...document.querySelectorAll('ul li')];
for (let i = 0; i < items.length; i += 2) {
    const wrapper = document.createElement('div');
    items.slice(i, i += 4);
    items.parentNode.insertBefore(wrapper, items);
    wrapper.appendChild(items);
}

That is invalid HTML. See https://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul — Unmitigated, Feb 08 '23 at 19:43
This is Invalid. as stated above. maybe you need to use something else than ul li. — danish-khan-I, Feb 08 '23 at 19:44
Let's take a step back: what's the purpose of the div tags you are attempting to add? — mykaf, Feb 08 '23 at 19:45
`items.slice(i, i += 4);` this increases `i` by four - but you say you want to do `2` — Moritz Ringler, Feb 08 '23 at 19:46
here is the solution in jquery https://stackoverflow.com/questions/28961721/how-to-wrap-every-4-elements-in-a-li-tag-with-jquery but i want to see how it will be in js vanilla — Bartłomiej Kuźniar, Feb 08 '23 at 19:49
The selected solution to the answer you just linked is nearly all vanilla javascript. Just replace `$("ul .product");` with `document.querySelectorAll("ul .product");` — mykaf, Feb 08 '23 at 19:51

score 1 · Accepted Answer · answered Feb 08 '23 at 19:58

You can use document.createElement to make a container on each iteration, then append some of the existing elements to it.

const container = document.getElementById('container');
const paragraphs = [...container.querySelectorAll('p')]; // or container.children
let incr = 2;
for (let i = 0; i < paragraphs.length; i += incr) {
  const div = document.createElement('div');
  for (const p of paragraphs.slice(i, i + incr)) div.append(p);
  container.append(div);
}

#container > div {
  border: 1px solid;
}

<div id="container">
   <p>text</p>
   <p>text</p>
   <p>text</p>
   <p>text</p>
   <p>text</p>
   <p>text</p>
</div>

Wrap every 2 elements in a tag with js vanilla?

1 Answers1

Wrap every 2 elements in a
tag with js vanilla?