javascript - Why would jQuery detach improve efficiency? -

for ajax result handler:

$('.update-flight-status').on('click', function() {   $.getjson('/status', function(result) {     var statuselements = $.map(result, function(status, index) {       var listitem = $('<li></li>');       $('<h3>'+status.name+'</h3>').appendto(listitem);       $('<p>'+status.status+'</p>').appendto(listitem);       return listitem;     }); $('.status-list').html(statuselements); }); 

and

$('.update-flight-status').on('click', function() {   $.getjson('/status', function(result) {     var statuselements = $.map(result, function(status, index) {       var listitem = $('<li></li>');       $('<h3>'+status.name+'</h3>').appendto(listitem);       $('<p>'+status.status+'</p>').appendto(listitem);       return listitem;     });     $('.status-list').detach()                   .html(statuselements)                   .appendto('.status');   }); }); 

why second example, "detach" used, more efficient first one?

jquery detach same remove, keeps jquery-specific assignments node, via data, or event handlers. method comes in handy when plan re-attach node point in dom.

in first version can't tell if status-list child of status, in case, you not removing node, stuff datas, event handlers, assigned classes, etc... remain.

in second version, remove status-list dom, modify it, re-attach. assume on same place (but there's missing code, it's wild guess) i'd it's in fact slower first case, because first case modifies html contents without bothering detach/reattach anything.

the case detach improve efficiency if remove node, , has been heavily customized, added classes, data, etc... reattach elsewhere, versus removing node, recreating it, reassign stuff, etc etc.