Question

I have a method that returns data from the database, then creates a string in the form of a html list tag

options.Append("<li value=\"" + reader["CIStatusID"].ToString() + "\"><a href=\"#\" class=\"filterOption checkable\">");
options.Append(reader["Status"].ToString() + "</a></li>");

then in my javascript i assign this to a ul tag named “filterType”

<div id="gearOptionsViewCaseFiles" style="display: none;">
    <ul>
        <li><a href="#">Filter by Status</a>
            <ul id="filterType">
            </ul>
        </li>
    </ul>
</div>

This is how I populate my ul tag with the dynamically generated list items:

success: function (data) {
    $('#filterType').val('<li value="0" class="filterOption checkable checked"><a href="#">All<img class="checkedimage" src="Images/tick.png" width="12" height="12"></a></li>' + data);
}

in the debugger, the “filterType”‘s value is the generated list items, but on the website, the list never appear. I can’t seem to figure out why it is not displaying if it is assigning the generated html items to the “filterType” ul tag

EDIT :
what the li items looks like when it’s being added to the ul:

<li value="0" class="filterOption checkable checked"><a href="#">All<img class="checkedimage" src="Images/tick.png" width="12" height="12"></a></li>

Answer 1

$('#filterType').val()

Should be

$('#filterType').html()

.val() is for Form elements. The ul is not a form element.. So .val() will not work..

Use .html()

var html = '<li value="0" class="filterOption checkable checked"><a '  
            + 'href="#">All<img class="checkedimage" src="Images/tick.png" '  
            + ' width="12" height="12"></a></li>' + data;


$('#filterType').html(html);

OR 

document.getElementById('filterType').innerHTML = html;