Как обернуть элементы, между триггерных элементов?

Question

[MFNIK]

Добрый день, допустим есть структура

<div class="blocks">
	<p></p>
	<p></p>
	<p class="start"></p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p class="end"></p>
	<p></p>
	<p></p>
</div>

Нужно обернуть в отдельный див 4 параграфа которые между Start и end.

Как такое реализовать?

Comments

[edward_freedom]

уточнись, ты не можешь получить элементы нужные или обернуть их в див?

Answer 1

[0xD34F]

const wrapper = document.createElement('div');
const start = block.querySelector('.start');
for (let el; !(el = start.nextElementSibling).matches('.end'); wrapper.appendChild(el)) ;
start.insertAdjacentElement('afterend', wrapper);

или

const wrapper = document.createElement('div');
const children = [...block.children];
const iStart = children.findIndex(n => n.classList.contains('start'));
const iEnd = children.findIndex(n => n.classList.contains('end'));
wrapper.append(...children.slice(iStart + 1, iEnd));
children[iStart].after(wrapper);

Answer 2

[Сергей Сергей]

wd = document.createElement( 'div' );
document.querySelectorAll( 'p.start ~ p:not( p.end ~ p, p.end )' ).forEach( p => wd.append( p ) );
document.querySelector( '.blocks' ).insertBefore( wd, document.querySelector('.end') );

Answer 3

[twobomb]

let div = document.createElement("div");
let end =document.querySelector(".blocks .end");
end.parentNode.insertBefore(div,end);
for(let i =0;i < 4;i++)
	div.appendChild(document.querySelector(".blocks .start+p"));