Dynamically showing large amount of html through AJAX

I'm trying to find the most reasonable way to dynamically show a lot of HTML after an AJAX call. We currently get a json array and then just create a string of HTML including the array values, then spit that all to $("#ele").html(), but the string is huge.

And that's the concern; we've got a good 100 lines of <div>s and <spans>, etc. in a javascript variable, Which makes the jquery string to dynamically insert a new order entry big and ugly, like below:

var newEntry = "<div class='sale-box' id='saleBox"+respObj[i]["id"]+"'>"
                                +"<div style='width: 100%; float: left;'>"
                                    +"<b><center>Invoice Number "+respObj[i]["invoiceNumber"]+"</b>"
                                    +"<a href='http://ift.tt/1por5wK"+respObj[i]["id"]+"'>"
                                    +" <i>(See History Log)</i></a></center>"
                +a hundred more lines... literally. 

Is there a better way to display a large amount of HTML from javascript? Right now, it seems our two options are 1) just having the php create the whole "" structure and sending that to javascript, or 2) taking the array variables and plug them into a big, long javascript string that we then output to an element?