Geek asks and answers

Add a clone or create a DOM on the fly - which is better?

I want 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 them will work (maybe I will need to configure, but they are close. Is one method preferable for the other? Is there something best? 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');

// only needed to solve the clone:

<ul class="hidden"><li id="rss-clone"><input type="checkbox" name="rss" value="" />bla</li></ul>
+5
source share
1 answer

See also: jQuery and dynamic elements vs display css attribute

The conclusion is that dynamically creating doms on the fly adds overhead to the client, while cloning existing doms happens quickly on the client, but has the overhead of rendering and loading them in advance.

, , ; , , , .

, - , , . 100 , , , .

, , , , , , JS-.

+4

More articles:


All Articles