jQuery .val() work but content then doesn't display
<p>I have a method that returns data from the database, then creates a string in the form of a html list tag</p>

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

<p>then in my javascript i assign this to a ul tag named "filterType"</p>

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

<p>This is how I populate my ul tag with the dynamically generated list items:</p>

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

<p>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</p>

<p><strong>EDIT :</strong>
what the li items looks like when it's being added to the ul:</p>

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