Unable to get jQuery to create proper HTML

Question

I'm creating an accordion menu using json data parsed via jQuery. The data is imported and displays as it should. However the HTML that is being created is incorrect, and I'm not sure what the issue is. Here is the HTML I need to create via jQuery:

<div id="pselector">
<div class="accordion accordion-bg clearfix">
    <div class="acctitle" >Category 1</div>
    <div class="acc_content clearfix">Product1</div>

    <div class="acctitle">Category 2</div>
    <div class="acc_content clearfix">Product 2</div>

    <div class="acctitle">Category 3</div>
    <div class="acc_content clearfix">Product 3</div>

    <div class="acctitle">Category 4</div>
    <div class="acc_content clearfix">Product 4</div>

    <div class="acctitle">Category 5</div>
    <div class="acc_content clearfix">Product 5</div>

    <div class="acctitle">Category 6</div>
    <div class="acc_content clearfix">Product 6</div>

</div>
</div>

Here is my current jQuery script:

<script>
    $.getJSON('https://example.com/api/products/GetProductList/', function(data) {
        var output = '<div class="accordion accordion-bg clearfix">';
        for (var i in data.Categories) {
            output += '<div class="acctitle">' + data.Categories[i].Category + "</div>";
            output += '<div class="acc_content clearfix">';
            for (var j in data.Categories[i].Products) {
                output += data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].cost + " USD";
            }
            output += "</div>";
        }
        output += "</div>";

        document.getElementById("pselector").innerHTML = output;
    });
</script>

When I look at the created HTML it appears correct, but doesn't display properly in the browser. What am I overlooking?

Answer 1

The problem that I see here is that you're trying to put <li> elements inside of a <div> . The div that has the class acc_content should be either a <ul> (unordered list) or an <ol> (ordered list) but <ul> is probably what you want. Try this

   $.getJSON('https://example.com/api/products/GetProductList/', function(data) {
        var output = '<div class="accordion accordion-bg clearfix">';
        for (var i in data.Categories) {
            output += '<div class="acctitle">' + data.Categories[i].Category + "</div>";
            output += '<ul class="acc_content clearfix">';
            for (var j in data.Categories[i].Products) {
                output += '<li>' + data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].cost + " USD  </li>";
            }
            output += "</ul>";
        }
        output += "</div>";

        document.getElementById("pselector").innerHTML = output;
    });

Answer 2

1st I would recommend using a template instead of building the html "by hand" like you are doing.

2nd If you are using jQuery, there's no need to do this:

document.getElementById("pselector").innerHTML = output;

just do this:

$("#pselector").html(output);

3rd Can you post the output of said jQuery code? It would be helpful in determining what went wrong.

Answer 3

Contrary to the comment above, you CAN have LIs in a DIV. The problem is that you have LIs and no UL or OL tag. It won't render LI without that.