jquery insert new open close div

Question

I have some menu loop coding, how to insert some div before start loop, and after end loop. I was try with .prepend but not working.

<li class="mega-menu-fullwidth dropdown"><a href='#'>Features</a>
    <ul class="dropdown-menu">
<!-- div open goes here <li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif"> -->
            <!-- Start First Loop -->
            <a href='javascript:void(0);'>submega</a>
            <div class="col-md-3 equal-height-in">
            <ul class="list-unstyled equal-height-list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
            </div><!-- End First Loop -->
<!-- div close goes here </div></div></div></li> -->
    </ul>
</li>

Any can help me? Thanks

$(function(){ $('.mega-menu-fullwidth .dropdown-menu').prepend('<li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif"></div></div></div></li>'); });

not working.

Answer 1

Hope it helps.

<li class="mega-menu-fullwidth dropdown"><a href='#'>Features</a>
    <ul class="dropdown-menu">
<!-- div open goes here <li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif"> -->
            <!-- Start First Loop -->
            <a href='javascript:void(0);'>submega</a>
            <div class="col-md-3 equal-height-in">
            <ul class="list-unstyled equal-height-list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
            </div><!-- End First Loop -->
<!-- div close goes here </div></div></div></li> -->
    </ul>
</li>

var appendedHtml = '<li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif">'+$('ul.dropdown-menu').html()+'</div></div></div></li>';
$('ul.dropdown-menu').html(appendedHtml);

$('ul.equal-height-list').eq(0).find('li').eq(0).remove();
$('ul.equal-height-list').eq(0).prepend('<h3>One</h3>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="mega-menu-fullwidth dropdown"><a href='#'>Features</a>
    <ul class="dropdown-menu">
<!-- div open goes here <li><div class="cfirst csecond"><div class="cthird"><div class="cfourt cfif"> -->
            <!-- Start First Loop -->
            <a href='javascript:void(0);'>submega</a>
            <div class="col-md-3 equal-height-in">
            <ul class="list-unstyled equal-height-list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
            </div><!-- End First Loop -->
<!-- div close goes here </div></div></div></li> -->
    </ul>
</li>