How to remove all children (but 2) from a parent element and append it to a new child element?

Question

I have a situation in JS where I need to create a wrapper, add it to the astrology section after h2 and then append all the.box divs to the wrapper (there's 5 of them). Here's the code that I tried. The thing is that I don't know how to select.box divs without selecting the wrapper div. Any idea?

 astrology = document.querySelector('#astrology'); astrology.append('<div class="wrapper"></div>'); const wrapper = document.querySelector('.wrapper'); const boxes = document.querySelectorAll('#astrology > div'); //but not wrapper wrapper.append('boxes');

 <section id="astrology"> <h2>Астрологичекие услуги</h2> <div class="box"> <div class="icon"> <i class="fas fa-people-arrows"></i> </div> <div class="content"> <h3>Ваш персональный гороскоп</h3> <p>Кто я? Я, как личность.</p> <p>Мой характер, темперамент, предпочтения, особенности. Самооценка. Vita.</p> </div> </div> <div class="box"> <div class="icon"> <i class="fas fa-euro-sign"></i> </div> <div class="content"> <h3>Гороскоп денег</h3> <p>Мои деньги. Мой заработок.</p> <p>Мои активы и ресурсы. Мои средства к существованию. Источники доходов. Недвижимость. Имущество. Владения.</p> </div> </div> </section>

Answer 1

You need to

• createElement as a wrapper
• select box divs using the existing class .box

 const wrapper = document.createElement('div'); document.querySelectorAll('.box').forEach(boxElement => { wrapper.appendChild(boxElement); }); document.getElementById('astrology').appendChild(wrapper);

 <section id="astrology"> <h2>Астрологичекие услуги</h2> <div class="box"> <div class="icon"> <i class="fas fa-people-arrows"></i> </div> <div class="content"> <h3>Ваш персональный гороскоп</h3> <p>Кто я? Я, как личность.</p> <p>Мой характер, темперамент, предпочтения, особенности. Самооценка. Vita.</p> </div> </div> <div class="box"> <div class="icon"> <i class="fas fa-euro-sign"></i> </div> <div class="content"> <h3>Гороскоп денег</h3> <p>Мои деньги. Мой заработок.</p> <p>Мои активы и ресурсы. Мои средства к существованию. Источники доходов. Недвижимость. Имущество. Владения.</p> </div> </div> </section>

Answer 2

 var wrapper = document.createElement('div'); var selector = document.querySelector("#astrology"); selector.insertBefore(wrapper, selector.firstElementChild.nextSibling); document.querySelectorAll('.box').forEach(boxElement => { wrapper.appendChild(boxElement); });

 <section id="astrology"> <h2>Астрологичекие услуги</h2> <div class="box"> <div class="icon"> <i class="fas fa-people-arrows"></i> </div> <div class="content"> <h3>Ваш персональный гороскоп</h3> <p>Кто я? Я, как личность.</p> <p>Мой характер, темперамент, предпочтения, особенности. Самооценка. Vita.</p> </div> </div> <div class="box"> <div class="icon"> <i class="fas fa-euro-sign"></i> </div> <div class="content"> <h3>Гороскоп денег</h3> <p>Мои деньги. Мой заработок.</p> <p>Мои активы и ресурсы. Мои средства к существованию. Источники доходов. Недвижимость. Имущество. Владения.</p> </div> </div> </section>