将一段 html 代码存储到 javascript 变量中的语法是什么？
<div class='saved' >
<div >test.test</div> <div class='remove'>[Remove]</div></div>
我想把上面的代码赋值给一个变量'test'
var test = "<div class='saved' >
<div >test.test</div> <div class='remove'>[Remove]</div></div>";
但它不起作用，分配代码的正确语法是什么？
TIA
【问题讨论】：
标签： javascript html
您好！我知道这是一篇较旧的帖子，但我在搜索“javascript add large block of html as variable”时通过 Google 找到了它。我想我会发布一个替代解决方案。
首先，我建议在变量本身周围使用单引号...这样更容易在实际 HTML 代码中保留双引号。
如果您想保持代码的格式感，可以使用反斜杠分隔行：
var code = '<div class="my-class"> \
<h1>The Header</h1> \
<p>The paragraph of text</p> \
<div class="my-quote"> \
<p>The quote I\'d like to put in a div</p> \
</div> \
</div>';
注意：您显然需要转义代码中的任何单引号（例如，在最后一个“p”标签内）
无论如何，我希望这对可能正在寻找与我相同的答案的其他人有所帮助......干杯！
【讨论】：
var test = "<div class='saved' >"+
"<div >test.test</div> <div class='remove'>[Remove]</div></div>";
如果需要换行，可以添加“\n”。
【讨论】：
'<div class="saved">'... 会更好。
<a onclick="return someFunc('x');">Click Me</a>
我们可以使用反引号 (``) 而不会出现任何错误。例如：<div>"test"<div>
我们可以在 ES6 javascript 标准中引入的反引号中存储大模板（HTML）
无需转义任何特殊字符
如果没有反引号.. 我们需要通过附加反斜杠（）来转义字符 例如："\"测试\""
【讨论】：
我建议使用mustache 模板框架工作。 https://github.com/janl/mustache.js/.
<body>
....................
<!--Put your html variable in a script and set the type to "x-tmpl-mustache"-->
<script id="template" type="x-tmpl-mustache">
<div class='saved' >
<div >test.test</div> <div class='remove'>[Remove]</div></div>
</script>
</body>
//You can use it without jquery.
var template = $('#template').html();
var rendered = Mustache.render(template);
$('#target').html(rendered);
我为什么推荐这个？
很快或以后，您将尝试替换 HTML 变量的某些部分并使其成为动态的。将其作为 HTML String 处理将是一件令人头疼的事情。这里是 Mustache 魔法可以帮助您的地方。
<script id="template" type="x-tmpl-mustache">
<div class='remove'> {{ name }}! </div> ....
</script>
和
var template = $('#template').html();
// You can pass dynamic template values
var rendered = Mustache.render(template, {name: "Luke"});
$('#target').html(rendered);
还有更多功能。
【讨论】：
【讨论】：
使用反引号的 template 语法的现代 Javascript 实现也是一种将 HTML 代码块分配给变量的简单方法：
const firstName = 'Sam';
const fullName = 'Sam Smith';
const htmlString = `<h1>Hello ${fullName}!</h1><p>This is some content \
that will display. You can even inject your first name, ${firstName}, \
in the code.</p><p><a href="http://www.google.com">Search</a> for \
stuff on the Google website.</p>`;
【讨论】：
您可以创建一个 javascript 对象，其中键是 html sn-p 的名称，值是连接在一起的 html 字符串数组。
var html = {
top_crimes_template:
[
'<div class="top_crimes"><h3>Top Crimes</h3></div>',
'<table class="crimes-table table table-responsive table-bordered">',
'<tr>',
'<th>',
'<span class="list-heading">Crime:</span>',
'</th>',
'<th>',
'<span id="last_crime_span"># Arrests</span>',
'</th>',
'</tr>',
'</table>'
].join(""),
top_teams_template:
[
'<div class="top_teams"><h3>Top Teams</h3></div>',
'<table class="teams-table table table-responsive table-bordered">',
'<tr>',
'<th>',
'<span class="list-heading">Team:</span>',
'</th>',
'<th>',
'<span id="last_team_span"># Arrests</span>',
'</th>',
'</tr>',
'</table>'
].join(""),
top_players_template:
[
'<div class="top_players"><h3>Top Players</h3></div>',
'<table class="players-table table table-responsive table-bordered">',
'<tr>',
'<th>',
'<span class="list-heading">Players:</span>',
'</th>',
'<th>',
'<span id="last_player_span"># Arrests</span>',
'</th>',
'</tr>',
'</table>'
].join("")
};
【讨论】：
请在您的html字符串的前后使用符号反引号'`'，这就是所谓的模板文字，现在您可以在多行中编写纯html并分配给变量。
示例>>
var htmlString =
`
<span>Your</span>
<p>HTML</p>
`
【讨论】：