I am trying to store a block of HTML in javascript variable like this,
var element = <div class="MMinfoboxRoot">
<div class="MMinfoboxaddress">
<div>
<span class="MMrecordName">leicester
</span>
<br>
<span class="MMdaySpan MMdaySpanTitle">Opening Times
</span>
<br>
<br>
<span class="MMdaysRoot MMdaysmonday">
<span class="MMdaySpan">Monday:
</span>
<span class="MMdayHoursSpan">9am - 8pm
</span>
</span>
<br>
<span class="MMdaysRoot MMdaystuesday">
<span class="MMdaySpan">Tuesday:
</span>
<span class="MMdayHoursSpan">9am - 8pm
</span>
</span>
<br>
<span class="MMdaysRoot MMdayswednesday">
<span class="MMdaySpan">Wednesday:
</span>
<span class="MMdayHoursSpan">9am - 8pm
</span>
</span>
<br>
<span class="MMdaysRoot MMdaysthursday">
<span class="MMdaySpan">Thursday:
</span>
<span class="MMdayHoursSpan">9am - 8pm
</span>
</span>
<br>
<span class="MMdaysRoot MMdaysfriday">
<span class="MMdaySpan">Friday:
</span>
<span class="MMdayHoursSpan">9am - 8pm
</span>
</span>
<br>
<span class="MMdaysRoot MMdayssaturday">
<span class="MMdaySpan">Saturday:
</span>
<span class="MMdayHoursSpan">9am - 6pm
</span>
</span>
<br>
<span class="MMdaysRoot MMdayssunday">
<span class="MMdaySpan">Sunday:
</span>
<span class="MMdayHoursSpan">11am - 5pm
</span>
</span>
<br>
<br>
<br>
<div class="links">
<strong style="color: rgb(0, 0, 102);">Get directions
</strong>
<form onsubmit="GetDirectionsFromInfoBox( this, 0 ); return false;" id="directionsForm-1" method="post" action="" class="directions">
<label for="infoboxDir1">From
<input type="text" id="infoboxDir1" value="birstall" class="text">
</label>
<input type="image" class="map-submit" src="css/winter-sale-2010/images/multimap/go-button.gif">
</form>
<a class="go-to-location" onclick="ZoomToLocation( 0 ); return false;" href="#">Zoom to this location
</a>
</div>
</div>
</div>
</div>
However it is throwing js errors saying unecapuslated strings. How can I do this please?
You need a backslash at the end for string that span multiple lines and some quotes to encapsulate it overall, like this:
var element = '<div class="MMinfoboxRoot"> \
<div class="MMinfoboxaddress"> \
....';
Also as @T.J. points out if you had any ' in the string (or whichever wrapping quotes you used), be sure to use the escaped form, for example \' here.
You could store it inside an ID'ed script tag instead:
<html>
<head>
<script id="htmlTemplate" type="text/x-tmpl">
This <h1>is</h1> templated.
</script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#2nd').html($('#htmlTemplate').text());
}
);
</script>
</head>
<body>
<div id="1st">First div</div>
<div id="2nd">Second div</div>
</body>
</html>
By the way, there's a jQuery plugin using this method: http://api.jquery.com/category/plugins/templates/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With