HTML block stored as var javascript
I am trying to store a block of HTML in javascript variable like this,
var element = <div class="MMinfoboxRoot">
<div class="开发者_JAVA百科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/
First of you need to use either ' or " to encapsulate strings literals.
Also, you need to add a \ add the end of each line, otherwise JavaScript won't recognize multi line strings.
Something like this will work:
var element = '<div class="MMinfoboxRoot">\
<div class="MMinfoboxaddress">\
<div>\
<span class="MMrecordName">leicester\
</span>'
Make sure to escape any ' inside that string, and if you want to have line breaks you need to add a \n in front of the trailing \.
Here is a handy tool that I've been using
http://htmltojavascript.com
It automatically creates a list of html tags, keeping
the indentation. I believe this using join is better
compared to concatenation as some members suggested.
I have ran your code on that site and it seems like it works.
加载中,请稍侯......
精彩评论