Remove/Add LI to UL single redraw
<p>I'm new to JQuery/Javascript. Have a JSON object that contains an array of strings I want to add to an unordered list. First I need to remove all existing <code>li</code> children from the <code>ul</code>, then I want to add each element of my string array as a <code>li</code> - but I think it will be important to add them all at the same time to avoid flicker from redraw? </p>

<p>Anyway, I don't know how to do it. I'm seeing examples of bits and pieces and have created the following code, but it has problems. It seems to remove all <code>li</code> children and it will add a <code>li</code>, but it keeps overwriting the last <code>li</code> added.</p>

<pre><code>var features = product.Attributes.Features
$('ul.feature').children('li').each(function () { $(this).remove(); });
if (features) {
    var li = $('&lt;li&gt;&lt;/li&gt;');
    for (var feature in features) {
        $('ul.feature').append(li);
        $(li).text(features[feature]);
    }
}
</code></pre>

<p><code>var features</code> is an array. I tried using <code>if (features.Length &gt; 0) {</code> but <code>Length</code> always shows <code>undefined</code> when I do that.</p>
