Question

我使用追加 li 元素的搜索结果填充列表。我为每个结果更新了DOM。

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

我想先制作一组 li 元素，然后只更新一次DOM树。

我尝试这样的事情：

var list = $([]);

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

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

但是div $("#searchResults")是空的。

问题出在哪里？

Answer 1

这样的事情要快得多：

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());

通过使用文档片段（$("<ul />")）并附加到它，然后追加到最后，我们不会弄乱每个追加的整个DOM。另外，我们不会重复选择#searchResults每个循环...或者检查.length也可能会很昂贵。

注意：此方法仍然使用DOM来创建元素（而不是字符串），从而消除了result.Name具有可能搞砸的HTML等问题。

Answer 2

尝试使用字符串。将所有li添加到字符串中，然后将其放入innerHTML div的searchResults。

var list = '';

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

$("#searchResults").innerHTML = list;

如果您正在寻找功效，这可能会更好，因为您没有使用DOM引擎。（尽管除非你要添加数百个li，否则它无论如何都可能是微不足道的。

Answer 3

动态创建DOM元素通常比使用innerHTML（或周围的包装器）慢。此外，将字符串与+连接在一起通常比使用Array.join('')慢。

最后，我怀疑这样的事情会是最快的：

var list = [];

for (var i = 0; i < topics.length; i++) 
    list.push("<li class=example>",topics[i].Name,"</li>");

$("#searchResults").html(list.join(''));

Answer 4

以前的所有解决方案仍然会为我们添加的每个元素重新计算，绘制和布局。

不是在创建文档时直接将元素附加到文档中，而是将它们附加到library main_app.custom_validator; import 'dart:html'; import 'package:polymer/polymer.dart'; import 'package:polymer_elements/iron_validator_behavior.dart' show IronValidatorBehavior; @PolymerRegister('custom-validator') class CustomValidator extends PolymerElement with IronValidatorBehavior{ CustomValidator.created() : super.created(); @reflectable bool validate(e, [_]){ switch(validatorType) { case 'json': return textValidator(e); } return false; } bool textValidator(e){ return false; } }，然后将其添加到DOM中。

DocumentFragment

优化通过jQuery将<li>附加到<ul> </ul> </li>

4 个答案: