Jquery 动态追加克隆或创建DOM-什么更好?

Jquery 动态追加克隆或创建DOM-什么更好?,jquery,Jquery,我希望从ajax调用返回的数组中列出以下列表 <ul id="list"> <li><input type="checkbox" name="rss" value="231" />bla</li> <li><input type="checkbox" name="rss" value="321" checked="checked" />ble</li> <li><input type

我希望从ajax调用返回的数组中列出以下列表

<ul id="list">
  <li><input type="checkbox" name="rss" value="231" />bla</li>
  <li><input type="checkbox" name="rss" value="321" checked="checked" />ble</li>
  <li><input type="checkbox" name="rss" value="431" />abc</li>
</ul>
  • 布拉
  • ble
  • abc
以下两种方法都可以(我可能需要调整,但它们很接近。一种方法优于另一种方法吗?有更好的方法吗?谢谢

var l=$("#list");
l.html('');
$(data).each(function(){
  l.append('<li><input type="checkbox" name="rss" checked="'+((this.selected)?'checked':null)+'" value="'+this.id+'" />'+this.channel+'</li>');
  //Or
  l.append($("#rss-clone").clone(true).removeAttr('id').find('input').val(this.id).attr('checked',(this.selected)?'checked':null).parent().text(this.channel));
},'json');
var l=$(“#列表”);
l、 html(“”);
$(数据)。每个(函数(){
l、 追加(“
  • ”+此.channel+”
  • ); //或 l、 append($(“#rss clone”).clone(true).removeAttr('id').find('input').val(this.id.).attr('checked',(this.selected)?'checked':null.parent().text(this.channel)); }“json”);
    //仅克隆解决方案需要:

    <ul class="hidden"><li id="rss-clone"><input type="checkbox" name="rss" value="" />bla</li></ul>
    
    • bla
      另请参见:

      好处是动态创建DOM会增加客户端的开销,而克隆现有DOM在客户端速度很快,但需要提前渲染和下载它们

      没有一个比另一个更好,哪一个更适合您取决于您的项目;如果您更关心客户端性能,而不是每个请求多下载几个字节,那么您最好选择克隆方法

      然而,据我所知,任何方法都不会严重影响客户端性能,克隆速度稍快,但动态创建元素的速度无论如何都不会太慢。除非您创建100个这样的元素,否则选择可能取决于您的品味,即您觉得什么更好


      但是需要注意的是,除非您需要创建许多非常不同的元素,否则克隆是一种更方便的方法,因为如果JS代码中没有嵌入标记,您可以轻松地对元素进行样式设置和修改。

      请参见:谢谢Mahn,我看到这是您的原始帖子。您觉得得到了答案吗?用这么多的话,我读到“这真的不太重要”。好的,一个好处是动态创建DOM会增加客户端的开销,而克隆现有DOM在客户端速度很快,但需要提前渲染和下载。没有一个比另一个更好,哪一个更适合您取决于您的项目;如果您更关心客户端,请执行例如,选择克隆方法比每个请求多下载几个字节要好。但据我所知,任何方法都不会严重影响客户端性能,克隆速度稍微快一点,但动态创建元素的速度无论如何都不会慢得可怕。除非您创建的是100s o如果你不需要创建很多不同的元素,那么我会克隆这些元素,这样你以后可以更方便地对其进行样式设计和修改。