Append clone or create DOM on the fly - What is better?

Viewed 1898

I wish to make the following list from an array returned from an ajax call.

<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>

Both of the following will work (I might need to tweak but they are close. Is one method preferred over the other? Is there something better altogether? Thanks

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

//required for clone solution only:

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