Question

I have an ajax call which creates a list based on what is returned:

$.ajax({
    type: "POST",
    url: "Home/FillTags",
    data: "{ 'mydataishere' }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
     $('.placetags').html('');
     $('.placetags').append("<div class=\"tags\">");
        var i = 0;           
        $.each(msg, function () {
            $('.placetags').append("<li><a href='javascript:void(0)' onclick=\"fnKeyWordSearch({'type' : '2' , 'tag' : '" + msg[i].TagID + "'});\"> " + msg[i].Tag + "</a></li>");
            i++;
        });
     $('.placetags').append("</div>");
    }
});

The ajax is returning proper list ,This is what I would like to see as rendered HTML :

<div class="placetags">
  <div class="tags">
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </div>
</div>

But… This is what I am getting …

<div class="placetags">
  <div class="tags"></div>
    <li>...</li>
    <li>...</li>
    <li>...</li>    
</div>

I do not understand why the .tags div is being closed before the <li>‘s are put into it. My css is written expecting to style <li>‘s that are inside of .tags , I do not understand why this is happening.

Answer 1

Just an improper nesting, try this:

$('.placetags').append("<div class=\"tags\">");
    var i = 0;           
    $.each(msg, function () {
        $('.tags').append("<li><a href='javascript:void(0)' onclick=\"fnKeyWordSearch({'type' : '2' , 'tag' : '" + msg[i].TagID + "'});\"> " + msg[i].Tag + "</a></li>");
        i++;
    });