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
Post a Comment