我希望从 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>
最佳答案
另请参阅:jQuery and dynamic elements vs display css attribute
要点是动态创建 dom 会增加客户端的开销,而克隆现有 dom 在客户端上速度很快,但会产生必须提前渲染和下载它们的开销。
没有哪个比哪个更好,哪个更适合您取决于您的项目;如果您更关心客户端性能而不是每个请求下载一些额外的字节,那么您最好选择克隆方法。
然而,据我所知,任何方法都不会严重影响客户端性能,克隆速度稍快一些,但动态创建元素无论如何也不会慢得可怕。除非您要创建数百个这样的产品,否则选择可能只是取决于品味问题,即什么对您来说感觉更好。
但是需要注意的一点是,除非您需要创建许多非常不同的元素,否则克隆是一种更方便的方法,因为如果标记未嵌入 JS 代码中,您可以在之后轻松地设置元素的样式和修改元素。
关于jquery - 追加克隆或动态创建 DOM - 哪个更好?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12026433/