Dynamically creating elements using jQuery
<p>I am building a list of checkbox items in jQuery based on an array returned from a handler.</p>

<p>The containing element is the <code>.listContainer</code> element below and then each dynamic element I want to add to this takes the form of the <code>.listContainerItem</code> element. Each item will have checkbox value and label based on the array item creating it.</p>

<pre><code>&lt;div class="listContainer"&gt;
    &lt;div class="listContainerItem"&gt;
        &lt;input type="checkbox" value="1" /&gt;
        &lt;div class="listContainerItemLabel"&gt;Checkbox 1&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>At the point of the function that has the array passed to it, what is the most efficient way of creating this? I have been trying to accomplish it as below, but quickly running into major performance issues.</p>

<pre><code>function AddItemToListContainer(item) {
    var currentItems = $j("#listContainerAvailable .listContainerItem");
    if ($j.grep(currentItems, function (e) { return $j(e).find(":checkbox:first").val() == item.Id; }).length === 0) {
        labelDiv = $j("&lt;div /&gt;").addClass("listContainerItemLabel").html(item.Text);
        itemToAdd = $j("&lt;div /&gt;").addClass("listContainerItem").append("&lt;input type=\"checkbox\" value=\"" + item.Id + "\" /&gt;").append(labelDiv);
        currentItems.append(itemToAdd);
    }
}
</code></pre>

<p>I've looked at <code>.map</code> function, but not sure quite how to implement it. Can someone point me in the right direction?</p>
