Estoy tratando de lograr un escenario en el que <a href="#">First</a> <i>click</i> debería estar envuelto con la división de clase contenedora y debería aplicarse el mismo escenario para
<a href="#">Second</a> <i>click</i>
pero lo que sucedió es que toda a etiqueta está envuelta con un contenedor div. El siguiente código que he probado hasta ahora.
Nota: estoy tratando de lograr en vainilla javascript
¡Cualquier ayuda será apreciada!
const main = document.querySelectorAll('.first-ul-1 >li, .sub-ul-1-a >li')[0]; const nodes = [...main.children].splice(0); const wrapper = document.createElement('div'); wrapper.classList.add('wrapper'); nodes.map(node => wrapper.appendChild(node)); main.appendChild(wrapper); <nav id="navigation" class="main-nav"> <ul class="main-nav-list first-ul-1"> <li> <a href="#">First</a> <i>click</i> <div class="drop-down-menu close"> <div class="menu-container"> <ul class="main-nav-list sub-ul-1-a"> <li> <a href="#">Second</a> <i>click</i> <ul class="main-nav-list sub-ul-2-a close"> <li> <a href="#">Summer</a> </li> </ul> </li> </ul> </div> </div> </li> </ul> </nav>