HTML 块存储为 var javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4439349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML block stored as var javascript
提问by sea_1987
I am trying to store a block of HTML in javascript variable like this,
我试图在这样的 javascript 变量中存储一个 HTML 块，
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?
但是，它会抛出 js 错误，指出未封装的字符串。请问我该怎么做？
回答by Nick Craver
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.
另外，正如@ TJ指出的那样，如果'字符串中有任何内容（或您使用的任何包装引号），请务必使用转义形式，例如\'此处。
回答by Flo
You could store it inside an ID'ed script tag instead:
您可以将其存储在带有 ID 的脚本标签中：
<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/
顺便说一句，有一个使用这种方法的 jQuery 插件：http: //api.jquery.com/category/plugins/templates/
回答by taesu
Here is a handy tool that I've been using
http://htmltojavascript.com
这是我一直在使用的一个方便的工具
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.
它会自动创建一个 html 标签列表，并保留
缩进。我相信使用 join
比一些成员建议的连接更好。
I have ran your code on that site and it seems like it works.
我已经在那个网站上运行了你的代码，看起来它有效。
回答by Ivo Wetzel
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.
此外，您需要在\每行末尾添加一个add，否则 JavaScript 将无法识别多行字符串。
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 \nin front of the trailing \.
确保转义'该字符串内的任何内容，如果您想要换行，则需要\n在尾随\.
