使用jQuery将列表项动态添加到ul

Question

I have the 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 to add the new list using Jquery here

      </ul>

    </div>

  </div>

I want to add a list as shown below using jquery to the 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 do i use jquery to add this code dynamically to the aforementioned class?

I have tried the following but it 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!

Answer 1

You can make your <li> as a template and append it to the <ul> using jquery. You can try something like this Fiddle :

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

Answer 2

if ($(".init-un-active").length == 0) {  
                    $.ajax({
                        url: 'URL From where you want to load ...',
                        type: 'POST',
                        data: { id: ID}, // pass your data here if any .. else keep empty
                        success: function (data) {
                            $(".init-un-active").css({ "display": "block", "z-index": "999999999999" });
                                $(".init-un-active").html(data);
                        },
                        error: function () {
                            alert('Unable to load menu...');
                        }
                    });
                }
                else {
                    if ($(".init-un-active ul").length > 0) {
                        $(".init-un-active ul").css("display", "none");
                        $(".init-un-active").css("display", "block");
                    }
                }

Explanation:

1. if ($(".init-un-active").length == 0)

This condition is used to check if there are already item loaded in li .. if yes then no need to call ajax.. just hide show that menu..

2. $(".init-un-active").css({ "display": "block", "z-index": "999999999999" });

this css is applied to show menu infront and hide all content beside this menu..

Answer 3

this.container.append(html);
    $('body').append(this.container);

instead of this try this

 $(".init-un-active").html(html);