dynamically add list item to ul using jquery

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!

"I want to add a list as shown below using jquery to the class 'init-un-active' " Is requirement to add list item to .init-un-active , or .init-un-active parent ul element ? — guest271314
– guest271314, Commented Jun 1, 2015 at 4:18
whoever marked the -1 to this post, i did not post the code to show what i have tried to simplify the question, but if thats what is needed i have posted it up on the main question — Rookie
– Rookie, Commented Jun 1, 2015 at 4:25
@Rookie "not to the parent ul element but to the list" makes no sense. The <ul> is the list (it's the unordered list element), and you grow it by adding <li> elements (list item elements) to it, so if you want to add something to the list, you very much want to add those to the parent <ul>, either by appending (so the new element is the last item in the list) or by inserting them somewhere in the already exising set of <li> — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jun 1, 2015 at 4:29

Kurenai Kunai · Accepted Answer · 2015-06-01 04:30:33Z

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);
});
});

answered Jun 1, 2015 at 4:30

Kurenai Kunai

1,9022 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zohaib Waqar · Accepted Answer · 2015-06-01 04:29:04Z

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:

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..

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

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

Why complicate the example with something unrelated like Ajax?

Zohaib Waqar · Accepted Answer · 2015-06-01 04:32:23Z

0

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

instead of this try this

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

answered Jun 1, 2015 at 4:32

Zohaib Waqar

1,24911 silver badges23 bronze badges

Collectives™ on Stack Overflow

dynamically add list item to ul using jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related