How to add a large amount of HTML in IE without sacrificing the processor

Question

I experimented with a more ajax approach to loading data on a page, mainly to avoid postbacks. I can easily get the html built by the server through an ajax call and add it to dom quite simply using jquery.append or .replaceWith. both of these methods are extremely fast in chrome / firefox, but terribly slow in ie (7,8,9).

$.ajax( { url: url, dataType: 'html', cache: false, success: function (responseHtml) { //document.getElementById('targetElementId').outerHTML = responseHtml; $('#targetElementId').replaceWith(responseHtml); } }); 

you will see from my code, I also tried using a non-jquery approach. both lines do monstrously that is. so my question is, what is the best practice for adding a lot of html to the page so that it doesn't crush, i.e.?

Answer 1

If you can, you'd better return JSON to the browser and use a template plugin like jQuery tmpl to display json in HTML for display, since tmpl does great caching, which speeds up work in slower browsers like IE, It also makes JSON response easier . Example:

 <script id="template" type="text/x-jquery-tmpl"> <span class="message">${text}</span> </script> <script type="text/javascript"> $.ajax( { url: url, dataType: 'json', cache: false, success: function (data) { $("#targetElementId").html($("#template").tmpl(data)); } }); </script> 

Your JSON response should be formatted so that it matches the pattern:

 { text: "Blah!" } 

Answer 2

You can try .text () or .html ().