I am trying to achieve a scenario where <a href="#">First</a> <i>click</i> should be wrapped with wrapper class div and the same scenario should apply for
<a href="#">Second</a> <i>click</i>
but what happened is the entire a tag is wrapped with wrapper div. The following code I have tried so far.
Note: I am trying to achieve in vanilla javascript
Any help will be appreciated !!
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>