Question

我希望从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>

以下两种方法都有效（我可能需要进行调整但是它们很接近。一种方法比另一种方法更受欢迎吗？是否有更好的方法？谢谢

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

//仅限克隆解决方案：

<ul class="hidden"><li id="rss-clone"><input type="checkbox" name="rss" value="" />bla</li></ul>

Answer 1

另请参阅：jQuery and dynamic elements vs display css attribute

需要注意的是，动态创建doms会增加客户端的开销，而克隆现有的doms在客户端上很快，但是需要提前渲染和下载它们。

没有比另一个更好，哪一个更适合你取决于你的项目;如果您更关心客户端性能，而不是每个请求下载一些额外的字节，那么您可以选择克隆方法。

据我所知，客户端性能不会受到任何方法的严重影响，克隆速度要快得多，但动态创建元素的速度并不是很慢。除非你创造了100个这样的选择，否则选择可能只是一个品味问题，即对你来说感觉更好。

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

附加克隆或动态创建DOM - 什么更好？

1 个答案: