Question

0

205

Views

Multiple Wrap div by targeting div using vanilla JavaScript

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>

about 4 years ago · Juan Pablo Isaza

Answer question

0

205

Multiple Wrap div by targeting div using vanilla JavaScript

Find remote jobs

Andres GPT