JQuery completely replace element DOM with another DOM - faster?

Question

I am using jQuery AJAX to get new content from the server. Data is loaded in JSON:

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

For server side restriction, I cannot configure more JSON variables inside, so I have to load all the content. This is why I have to load the result in jQuery, than to search and replace some elements on the page like this (used in somefunction ):

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

EDIT: Please note that I must follow the same process to replace three divs!

This is more, but, for example, enough, I hope. My question is: for some logical reasons, I expect the result of loading to the DOM ( $(data.content) ), parsing by html ( con.find('dix#ajax-content').html() ) and back to the DOM ( $('div#mainContent').html() ) it seems to me how to lose some resources and reduce performance I would like to know if there is a faster way to do this and load the DOM directly, for example:

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

I tried to do this, but maybe I don’t know what to enter. Also, jQuery documentation didn't help me much.

Some facts:

• jQuery 1.9.1
• JQuery UI 1.10.3 Available

Finally, I know that it would be much better to do something with the server application in order to provide more JSON variables, however I need to write a not-so-simple world of code that takes more time to develop I don’t have right now. Doing this on the client side would be a temporary solution at the moment, however I do not want to significantly reduce performance.

Side question:

Is it right to use the find() function in this case, or is there some better one?

EDIT 2 (syntax line does not work) I expect this to work, but it is not:

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

Answer 1

Actually, $(data.content) should work fine, but you should keep in mind that top-level elements can only be reached via .filter() instead of .find() . If the elements you want to target are at least one level deeper than the root, you should use .find() ; in the examples below you can replace .filter() with .find() where necessary.

 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 also combine selectors together:

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

Finally, since identifiers should only appear once inside the document, you can drop the div part:

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

Update

Well, it seems that jQuery is not evaluating data.content correctly when there are newlines in the wrong places; this should work in all cases:

 var wrapper = document.createElement('div'); wrapper.innerHTML = data.content; var $con = $(wrapper); 

Answer 2

I am not sure if this will help:

 $('div#mainContent').replaceWith(con.find('div#ajax-content')) .attr("id","mainContent") 

Now you do not need to set the html of the element and get the html of the element that you just created from JSON. Not sure if this is actually faster, but it skips steps 2 of html ().

Answer 3

You can use .load , although I believe this is just a wrapper for the same thing:

 $("#mainContent").load(url + " #ajax-content", data); 

You can increase server-side performance by sending only specific ajax content (less to download and parse), although this can be difficult.

Also, it is best to use vanilla JS over jQuery, at least for adding (using innerHTML directly).