JS Template String vs Jquery DOM Creation

prep.js

var hotelObj = {"hotelId":"2653","p":"30","n":"America`s Best Inn Main Gate East","d":"In the Walt Disney World Resort Area offering FREE Shuttle Service! A great family vacation spot nearby the major theme parks of Orlando Florida.","lat":"28.3321","lng":"-81.4892","a":"All Orlando","aid":"19","v":"","url":"http:\/\/bookitsb.com\/us\/florida\/orlando\/hotels\/americas-best-inn-main-gate-east\/","nr":"0","sr":"25","tr":"","fr":"","tsm":"","rqm":"","r":"Deluxe Room","pr":"","su":"Near Disney, Kissimmee - Hotel with FREE Theme Park Shuttles","ma":"In the Walt Disney World Resort Area offering FREE Shuttle Service!","fc":"","i":"","am":"","li":"MCO","ln":"Orlando, Florida, United States","c":{"l":"BONUS","n":"JOINT TEST"},"st":"50","img":"\/\/images.bookit.com\/RA10168\/RA10168_227891_TN.jpg"};

window.buildHotelHTML = function( hotelData){
	var str = '<div class="hidden pod resultsPod hotelResults rowClearOFH  ' + '">\
	<input type="hidden" name="hotelUniqueId" value="' + hotelData.hotelId + '" disabled="disabled" />\
	<input type="hidden" name="hotelId" value="" disabled="disabled" />\
	<input type="hidden" name="hotelVendorId" value="" disabled="disabled" />\
	<input type="hidden" name="locationId" value="' + hotelData.li + '" disabled="disabled" />\
	<input type="hidden" name="locationName" value="' + hotelData.ln + '" disabled="disabled" />\
	<input type="hidden" name="showRates" value="0" disabled="disabled" />\
	<input type="hidden" name="defaultBestTimeToBookitNights" value="" disabled="disabled" />\
	<div class="row resultInfo">\
	<div id="ResultsMainPhoto" class="row">\
	<a class="resultsWomPlay" href="javascript:void(0);" onClick="new HotelGallery("' + hotelData.hotelId + '",{viewOnly:false,view:"videos",pageType:"results"});">\
	<img border="0" src="//images.bookit.com/3.0/Uni_Trans.gif"/></a>\
	<a class="photoBtn btnContainer grayBorder" href="javascript:void(0);" onclick="new HotelGallery("' + hotelData.hotelId + '",{viewOnly:false,view:"photos",pageType:"results"});">\
	<span class="grayBtn">photos</span></a>\
	<a class="updateInterstitial" href="' + hotelData.url + '" >\
	<img class="hotelImage" src="' + hotelData.img + '" border="0" width="150" height="95" alt="' + hotelData.n + '"  title="' + hotelData.n + '" />\
	</a></div>\
	<div class="row hotelInfo text noUnderLine">\
	<a href="' + hotelData.url + '" class="updateInterstitial rowClearOFH resultName noUnderLine text">\
	<span class="text fontLargest noUnderLine fontBold fontDarkGrey"><span class="tpText_hotelName">' + hotelData.hotelId + ' : ' + hotelData.n + '</span></span></a>\
	<div class="rowClear rowBlock">\
	<a href="javascript:void(0);" class="importantNote roomSpecialRate text fontBold">&#10003; Best Rate Guaranteed!</a></div>\
	<a href="' + hotelData.url + '" class="updateInterstitial rowClearOFH notify promo text noUnderLine resultPromo fontPromoBlue">\
	$79: Book Now For Holidays Sale</a>\
	<a href="' + hotelData.url + '" class="updateInterstitial rowClearOFH text hotelSubtitle fontBlack noUnderLine"></a>\
	<div class="Rating_Box rowClearOFH">   \
	<a href="' + hotelData.url + '" class="updateInterstitial text fontBold fontLightMediumGrey Our_Rating noUnderLine"> Our Rating: </a>\
	<a href="' + hotelData.url + '" class="updateInterstitial dateless_stars smallStarRatingGray_' + hotelData.sr + ' text noUnderLine"><img border="0" src="http://images.bookit.com/3.0/Uni_Trans.gif" alt="" title=""></a>\
	<a href="' + hotelData.url + '" class="updateInterstitial text fontBold fontLightMediumGrey Guest_Rating noUnderLine">\
	Guest Rating: </a>\
	<a href="' + hotelData.url + '" class="updateInterstitial text fontLargest guestRatingPercent fontBlack noUnderLine"><b>Exceptional:</b><span class="value">' + hotelData.fr + '</span></a>\
	<a onclick="sendToolView("Results to Reviews Tab","Results")" href="' + hotelData.url + '&tabOverride=Reviews" class="numberOfGuestReviews text noUnderLine">\
	' + hotelData.nr + ' Reviews </a></div></div>\
	</div>\
	<div class="priceContainer row">\
	<a href="#" class="updateInterstitial text fontAXLarge fontNormal fontBlack noUnderLine">' + hotelData.p + '</a>\
	<a href="#" class="row anrContainer text fontSmall fontLightMediumGrey noUnderLine">avg. nightly rate</a>\
	<div class="row bookitExtrasContainer"></div>\
	<a class="updateInterstitial moreDetails btnContainer greenBorder hotelSelectButton" href="' + hotelData.url + '" onClick="transitionResultsToAddons()" id="tp_search_' + hotelData.hotelId + '">\
	<span class="greenBtn">SELECT</span></a></div></div>';

	return str;
}
	
window.buildHotelJQuery = function(hotelData) {
	//master row
	var row = jQuery('<div>')
		.attr('id', 'hotelResult' + hotelData.hotelId)
		.addClass('hidden').addClass('pod').addClass('resultsPod').addClass('hotelResults').addClass('rowClearOFH');
	if ( hotelData.tsm || hotelData.rqm ) {
		row.addClass('saleAlert');
	}
	if ( hotelData.st > hotelData.p ) {
		row.addClass('promo');
	}
	//hidden inputs
	row.append(
		jQuery('<input>')
			.attr('type','hidden').attr('name','hotelUniqueId').attr('disabled','disabled')
			.val(hotelData.hotelId)
	).append(
		jQuery('<input>')
			.attr('type','hidden').attr('name','hotelId').attr('disabled','disabled')
			.val("")
	).append(
		jQuery('<input>')
			.attr('type','hidden').attr('name','hotelVendorId').attr('disabled','disabled')
			.val("")
	).append(
		jQuery('<input>')
			.attr('type','hidden').attr('name','locationId').attr('disabled','disabled')
			.val(hotelData.li)
	).append(
		jQuery('<input>')
			.attr('type','hidden').attr('name','locationName').attr('disabled','disabled')
			.val(hotelData.ln)
	).append(
		jQuery('<input>')
			.attr('type','hidden').attr('name','showRates').attr('disabled','disabled')
			.val('0')
	).append(
		jQuery('<input>')
			.attr('type','hidden').attr('name','defaultBestTimeToBookitNights').attr('disabled','disabled')
			.val('0')
	);

	//are we doing TSM or RQM?
	if ( hotelData.tsm || hotelData.rqm ) {
		var saleAlertContainer = jQuery('<div>').addClass('saleAlertContainer');
		var saleAlert = jQuery('<div>').addClass('saleAlert');

		if ( hotelData.tsm ) {
			saleAlert.append(
				jQuery('<div>')
					.addClass('contentLeft')
					.addClass('text')
					.addClass('fontRed')
					.addClass('fontBold')
					.html(hotelData.tsm)
			)
		}
		if ( hotelData.tsm && hotelData.rqm ) {
			saleAlert.append(
				jQuery('<div>')
					.addClass('contentMiddle')
					.html("|")
			)
		}
		if ( hotelData.rqm ) {
			saleAlert.append(
				jQuery('<div>')
					.addClass('contentRight')
					.addClass('text')
					.addClass('fontRed')
					.addClass('fontBold')
					.html(hotelData.rqm)
			)
		}
		saleAlert.append(
			jQuery('<div>')
				.addClass('saleBottomLine')
		);

		saleAlertContainer.append(saleAlert);

		row.append(saleAlertContainer);
	}

	var resultInfo = jQuery('<div>')
		.addClass('row').addClass('resultInfo');

	var resultInfoMedia = jQuery('<div>')
		.addClass('row')
		.attr('id','ResultsMainPhoto');

	//image/video icon/etc
	if ( hotelData.v ) {
		resultInfoMedia.append(
			jQuery('<a>')
				.addClass('resultsWomPlay')
				.attr('href', '#none')
				.click( function(ev) {
					alert('hi');
				} )
				.append(
					jQuery('<img>')
						.attr('border', '0')
						.attr('src', "//images.bookit.com/3.0/Uni_Trans.gif")
				)
		);
	}

	//all inclusive?
	if (hotelData.ai) {
		resultInfoMedia.append(
			jQuery('<div>').addClass('AllInclusiveIcon')
		);
	}

	//photos button
	resultInfoMedia.append(
		jQuery('<a>')
			.addClass('photoBtn').addClass('btnContainer').addClass('grayBorder')
			.attr('href', '#none')
			.click( function(ev) {
				alert('show pics');
			} )
			.append(
				jQuery('<span>')
					.addClass('grayBtn')
					.html('photos')
			)
	);

	//hotel image
	resultInfoMedia.append(
		jQuery('<a>')
			.addClass('updateInterstitial')
			.attr('href', hotelData.url)
			.append(
				jQuery('<img>')
					.addClass('hotelImage')
					.attr('id', 'htlImg' + hotelData.hotelId)
					.attr('border', '0')
					.attr('width', '150')
					.attr('height', '95')
					.attr('alt', hotelData.n)
					.attr('src', hotelData.img)
			)
	);

	resultInfo.append(resultInfoMedia);

	//hotel Info block
	var hotelInfo= jQuery('<div>')
		.addClass('row').addClass('hotelInfo').addClass('text').addClass('noUnderLine');

	//hote title
	hotelInfo.append(
		jQuery('<a>')
			.attr('href', hotelData.url)
			.addClass('updateInterstitial').addClass('rowClearOFH').addClass('resultName').addClass('noUnderLine').addClass('text')
			.append(
				jQuery('<span>')
					.addClass('text').addClass('fontLargest').addClass('noUnderLine').addClass('fontBold').addClass('fontDarkGrey')
					.append(
						jQuery('<span>')
							.addClass('tpText_hotelName').html(hotelData.n)
					)
			)
	);

	//room info special
	//@TODO

	//promos
	if ( hotelData.pr ) {
		hotelInfo.append(
			jQuery('<a>')
				.addClass('updateInterstitial').addClass('rowClearOFH').addClass('notify').addClass('promo').addClass('text').addClass('noUnderLine').addClass('resultPromo').addClass('fontPromoBlue')
				.html(hotelData.pr)
		);
	}

	//area text and map link
	if ( hotelData.su || hotelData.sd ) {
		var text = hotelData.su;

		if ( hotelData.sd ) {
			var text = text + " " + hotelData.sd + " miles from " + hotelData.ln;
		}
	} else {
		var text = hotelData.ma;
	}
	hotelInfo.append(
		jQuery('<a>')
			.addClass('updateInterstitial').addClass('rowClearOFH').addClass('text').addClass('hotelSubtitle').addClass('fontBlack').addClass('noUnderLine')
			.html(text)
	);

	//star and guest rating
	var ratingBox = jQuery('<div>').addClass('Rating_Box').addClass('rowClearOFH');
	if ( hotelData.sr ) {
		ratingBox.append(
			jQuery('<a>')
				.attr('href', hotelData.url)
				.addClass('updateInterstitial').addClass('text').addClass('fontBold').addClass('fontLightMediumGrey').addClass('Our_Rating').addClass('noUnderLine')
				.html('Our Rating: ')
		).append(
			jQuery('<a>')
				.attr('href', hotelData.url)
				.addClass('updateInterstitial').addClass('dateless_stars').addClass('smallStarRatingGray_' + hotelData.sr).addClass('text').addClass('noUnderLine')
				.append(
					jQuery('<img>')
						.attr('border', '0')
						.attr('src', "//images.bookit.com/3.0/Uni_Trans.gif")
				)
		);
	}
	if ( hotelData.nr > 0 ) {
		if ( hotelData.tr ) {
			var userRating = jQuery('<b>').html(hotelData.tr + ": ").after(hotelData.fr);
		} else {
			var userRating = hotelData.fr;
		}
		ratingBox.append(
			jQuery('<a>')
				.attr('href', hotelData.url)
				.addClass('updateInterstitial').addClass('text').addClass('fontBold').addClass('fontLightMediumGrey').addClass('Guest_Rating').addClass('noUnderLine')
				.html('Guest Rating: ')
		).append(
			jQuery('<a>')
				.attr('href', hotelData.url)
				.addClass('updateInterstitial').addClass('text').addClass('fontLargest').addClass('guestRatingPercent').addClass('fontBlack').addClass('noUnderLine')
				.html(userRating)
		).append(
			jQuery('<a>')
				.addClass('numberOfGuestReviews').addClass('text').addClass('noUnderLine')
				.click( function (ev) {
					sendToolView('Results to Reviews Tab','Results');
				} )
				.attr('href', '#sendToHotelDetailsPage')
				.html(hotelData.nr + " Reviews")
		);
	}

	hotelInfo.append(ratingBox);

	resultInfo.append(hotelInfo);

	row.append(resultInfo);

	return row;
}