jQuery: difficulty with element.append()

jQuery: difficulty with element.append()
0

#1

I am having difficulty with append. I am rebuilding my personal portfolio to dynamically generate the HTML using JavaScript so that I can eventually request the data from a backend api. I have more or less finished it, but I’m having difficulty appending the navigation links to the navigation dropdowns. The function to do this is shown below:

function addNavigation(navData){
    var headings = navData['headings']; //an array of strings that matches the keys in the body object
    var body = navData['body']; //an object with the keys matching the names of the dropdown, and an array of html strings for each list element
    headings.forEach(function(elem){//iterate through the headings to create the dropdown header
      $('#dropdown-lists').append(elem); //append the header to the <ul> element
    });

    //iterate through the body object
    for(var key in body){
      var current = body[key];//get the current array of strings
      var elemToBeAppendedTo = $('#' + key + '-dropdown');//cache the DOM element created above
      current.forEach(function(elem){//iterate through the list elements
        elemToBeAppendedTo.append(elem);//append the element 
      });
    }
}

An example of the navData object being passed to the function would be this:

{
    'body':{
        'backend':[
            '<li><a href="#section1">Java REST API</a></li>',
            '<li><a href="#section3">Ruby Backend</a></li>',
            '<li><a href="#section5">spring backend</a></li>'
        ],
        'frontend':[
            '<li><a href="#section2">Angular Frontend</a></li>',
            '<li><a href="#section6">react frontend</a></li>'
        ],
        'fullstack':[
            '<li><a href="#section4">Jquery forntend</a></li>'
        ]
    },
    'headings':[
        '<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Backend Projects<span class="caret"></span></a><ul id="backend-menu" class="dropdown-menu"></ul></li>',
        '<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Frontend Projects<span class="caret"></span></a><ul id="frontend-menu" class="dropdown-menu"></ul></li>',          
        '<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Fullstack Projects<span class="caret"></span></a><ul id="fullstack-menu" class="dropdown-menu"></ul></li>'

    ]
}

So the basic idea is that I would iterate through the contents of the headings array, append those HTML strings to the navbar (this part works btw, i get the three separate dropdowns displaying correctly), then iterate through each array in the body object and append those <li> elements to the <ul> elements already in the navbar.

The dropdown menus get generated, but not the nav links in those dropdowns. What am i doing wrong? Full source is available here.

EDIT: It might be worth noting that the HTML strings that I generated within the other functions appear to be correct. The dropdown menus, which do appear, can be found using their respective ID’s, as r.fn.init{} in the browser console. I tried adding a unique ID to each of the <li>elements to see if they could be discovered in the DOM, and they are present. I just don’t know why they are not showing.


#2

You tried to select the wrong id.

Original:
464 var elemToBeAppendedTo = $(’#’ + key + ‘-dropdown’);//cache the DOM element created above
What you actually should have in there:
464 var elemToBeAppendedTo = $(’#’ + key + ‘-menu’);//cache the DOM element created above


#3

Of course, its always something simple. I guess I was just staring at it for too long. Thank you for stopping my head from exploding.