将一段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
小智 50
问候!我知道这是一篇较旧的帖子,但我在搜索"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'标记内)
无论如何,我希望能帮助其他可能正在寻找相同答案的人...干杯!
dra*_*nHR 34
var test = "<div class='saved' >"+
"<div >test.test</div> <div class='remove'>[Remove]</div></div>";
如果需要换行,可以添加"\n".
小智 17
我们可以使用反引号(``)而不会出现任何错误.例如: <div>"test"<div>
我们可以在ES6 javascript标准中引入的反引号中存储大模板(HTML)
无需逃避任何特殊字符
如果没有反引号...我们需要通过附加反斜杠()来转义字符,例如:"\"test \""
我建议使用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将是一个令人头疼的问题.这里是Moustache魔术可以帮助你的地方.
<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);
还有很多功能.