javascript - dynamically add list item to ul using jquery -


i have following html structure:

  <div id="gw-sidebar" class="gw-sidebar">      <div class="nano-content">       <ul class="gw-nav gw-nav-list">         <li class="init-un-active"> <a href="javascript:void(0)"> <span class="gw-menu-text">scenarios</span> </a> </li>           //===>need add new list using jquery here        </ul>      </div>    </div> 

i want add list shown below using jquery class 'init-un-active' shown above:

        <li class="init-arrow-down"> <a href="javascript:void(0)"> <span class="gw-menu-text">scenario-1</span> <b class="gw-arrow"></b> </a>           <ul class="gw-submenu">             <li> <a href="javascript:void(0)">scenario</a> </li>             <li> <a href="javascript:void(0)">resolutions</a> </li>             <li> <a href="javascript:void(0)">triggers</a> </li>           </ul>         </li> 

how use jquery add code dynamically aforementioned class?

i have tried following wont work:

<script type="text/javascript"> function loadscenarioform () {     sidemenu.createbaseentry();    // scenarioform.create(); }  var sidemenu = { container : null,  scenariocount : 0,  scenariotxt : "scenario", resolutionstxt : "resolutions", triggerstxt : "triggers", menulink : "javascript:void(0)", submenulink1 : "javascript:void(0)", submenulink2 : "javascript:void(0)", submenulink3 :"javascript:void(0)",   createbaseentry : function createdefault () {     this.container = $(document.createelement('div'));     this.container.addclass('gw-sidebar');     var html = "";     html += '<div id="gw-sidebar" class="gw-sidebar">';     html += '<div class="nano-content">';     html += '<ul class="gw-nav gw-nav-list">';     html += '<li class="init-un-active"> <a href="javascript:void(0)"> <span class="gw-menu-text">scenarios</span> </a> </li>';     html += '</ul></div></div></div>';      this.container.append(html);     $('body').append(this.container);      this.scenariocount++;     this.container.append(this.createentry(scenariocount));    },  createentry : function createdefault (index) {     var list = $('ul.mylist');     var li = $('<li/>')     .addclass('ui-menu-item')     .attr('role', 'menuitem')     .appendto(list);     return list;  }, </script> 

please advise,

thanks!

you can make <li> template , append <ul> using jquery. can try fiddle:

$(document).ready(function(){     $('a').click(function() {       var template = $('#hidden-template').html();         $('.gw-nav').append(template); }); }); 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -