javascript - jQuery complete replace DOM of element with another DOM - faster way? -

i'm using jquery's ajax getting new content server. data loaded in json:

$.ajax({     url: url,     data: {         'ajax': '1',     },     datatype: 'json',     success: somefunction }); 

for server-side application limitation, i'm not able setup more json variables inside have load content. why have load result jquery, search , replace elements on page, (used in somefunction):

var somefunction = function(data) {     var con = $('<div></div>').html(data.content); // $(data.content) not working     $('div#maincontent').html(con.find('div#ajax-content').html());     ... // same process 3 more divs } 

edit: please, note have same process replace 3 divs!

there more that, example, it's enough hope. question: logic way, expect loading result dom ($(data.content)), parsing html (con.find('dix#ajax-content').html()) , dom ($('div#maincontent').html()) seems me loosing resources , decreasing perfomance know if there faster way , load dom directly, like:

$('div#maincontent').dom(con.find('div#ajax-content').dom()); 

i tried google maybe don't know type in. jquery documentation not helped me lot.

some facts:

• jquery 1.9.1
• jquery ui 1.10.3 available

finally, know more better server-side app provide more json variables, however, need write not-so-easy peace of code requiring longer time develop don't have right now. doing on client side temporary solution now, however, don't want decrease performace lot.

side-question:

is correct use find() function in case or there better one?

edit 2 (not working parsing string) i'm expecting working it's not:

content = '<div id="ajax-title">pečivo běžné, sladké, slané</div> <div id="ajax-whereami"><a href="/category/4">chléba pečivo</a> » pečivo běžné, sladké, slané</div>'; $(content); 

actually, $(data.content) should work fine, have keep in mind the top level elements can reached via .filter() instead of .find(). if elements wish target @ least 1 level deeper root should use .find() though; in examples below can replace .filter() .find() appropriate.

var $con = $(data.content); $('div#maincontent')   .empty()   .append($con.filter('div#ajax-content'))   .append($con.filter('div#another-id'))   .append($con.filter('div#and-another-id')); 

you can combine selectors together:

  .append($con.filter('div#ajax-content, div#another-id, div#and-another-id')); 

lastly, since identifiers should appear once inside document, can drop div part:

  .append($con.filter('#ajax-content, #another-id, #and-another-id')); 

update

okay, seems jquery doesn't evaluate data.content when there newlines in wrong places; should work in cases:

var wrapper = document.createelement('div'); wrapper.innerhtml = data.content;  var $con = $(wrapper);