如何从父元素中删除所有子元素（但 2 个）并将 append 删除到新的子元素？

Question

我在 JS 中有一种情况，我需要创建一个包装器，将其添加到 h2 之后的占星术部分，然后将 append 所有 the.box div 都添加到包装器（其中有 5 个）。 这是我尝试过的代码。 问题是我不知道如何在不选择包装器 div 的情况下使用 select.box div。 任何想法？

 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

你需要

• createElement 作为包装器
• select box divs 使用现有的 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>