Question

I populate a list with search results appending li elements. I update DOM for each result.

for (var i = 0; i < topics.length; i++) {
    $("#searchResults").append(
        $("<li />")
            .append(result.Name)
            .addClass("example")
    );
};

I want to make a group of li elements first and update DOM-tree just once.

I try something like this:

var list = $([]);

for (var i = 0; i < topics.length; i++) {
    list.append(
        $("<li />")
            .append(result.Name)
            .addClass("example")
    );
};

$("#searchResults").append(list);

But div $("#searchResults") is empty.

Where is the problem?

Answer 1

Something like this should be much faster:

var ul = $("<ul />");
for (var i = 0, l=topics.length; i < l; i++) {
   $("<li />", { text: result.Name, "class": "example" }).appendTo(ul);
};
$("#searchResults").append(ul.contents());

By using a document fragment ($("<ul />")) and appending to it, then appending at the end, we’re not messing with the entire DOM each append. Also we’re not repeatedly selecting #searchResults each loop…or checking .length would could also be expensive.

Note: this method still uses the DOM to create elements (as opposed to a string), eliminating issues of result.Name having HTML that could screw things up, etc.