如何将html代码块分配给javascript变量

将html代码块存储到javascript变量的语法是什么

<div class='saved' >
<div >test.test</div> <div class='remove'>[Remove]</div></div>

test.test[移除]

我想将上述代码分配给变量“test”

var test = "<div class='saved' >
<div >test.test</div> <div class='remove'>[Remove]</div></div>";

var测试=”
test.test[删除]”；

但是它不起作用，分配代码的正确语法是什么

TIA

var test=“”+
“test.test[删除]”；

---

如果需要换行符，可以添加“\n”。

问候！我知道这是一篇比较老的帖子，但我在谷歌搜索“javascript添加大块html作为变量”时发现了它。我想我应该发布一个替代解决方案

首先，我建议在变量本身周围使用单引号。。。使在实际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>';

var-code='1〕\
标题\
正文的段落
\
\
我想把这句话放在div中
\
\
';

注意：您显然需要在代码中转义任何单引号（例如，在最后一个“p”标记中）

---

无论如何，我希望这能帮助其他人，他们可能正在寻找与我相同的答案。。。干杯

仅供参考，这里是不同技术渲染性能的基准

---

m、

我建议使用

胡须

模板框架

及

还有更多的功能。

我们可以毫无错误地使用反勾号（``）。。例如：

“测试”

我们可以在es6javascript标准中引入的backticks中存储大模板（HTML）

不需要转义任何特殊字符

如果没有反勾号。。我们需要通过附加反斜杠（）来转义字符

---

例如：“\”test\”

您可以创建一个javascript对象，其中键是html代码段的名称，值是连接在一起的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("")
};

var html={
顶级犯罪模板：
[
"罪大恶极",，
'',
'',
'',
"罪行",，
'',
'',
"逮捕",，
'',
'',
''
].加入（“”），
顶级团队模板：
[
“顶级球队”，
'',
'',
'',
“团队：”，
'',
'',
"逮捕",，
'',
'',
''
].加入（“”），
顶级玩家模板：
[
“顶级球员”，
'',
'',
'',
“玩家：”，
'',
'',
"逮捕",，
'',
'',
''
].join（“”）
};

使用反勾号的

模板

语法的现代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>`;

const firstName='Sam'；
常量全名='Sam Smith'；
const htmlString=`Hello${fullName} 这是一些内容\
这将显示。您甚至可以输入您的名字${firstName}\
在代码中。
用于\
谷歌网站上的资料。
`；

请在html字符串的前面和结尾使用符号backtick'`'，这就是所谓的模板文本，现在您可以在多行中编写纯html并分配给变量

示例>>

var htmlString =

`

<span>Your</span>
<p>HTML</p>

`

var htmlString=
`
你的
HTML

`

到底什么不起作用？你不能在那里有一个换行符，但除此之外语法很好。谢谢Cfreak，换行符是个问题，所以如果你缩小你的html，它可以放在一个字符串中？谢谢Dragan，这是html文本代码中的两个换行符。你为什么在html中使用单引号？@ram4nd I post的c/p代码，但你是对的，

“”…

会更好。如果需要换行，可以添加“\n”。可以吗？根据这个答案，你不能。双引号中的单引号怎么样？i、 e

单击我

使用这种插入额外空格的方法时要小心。特别是如果这个javascript嵌套很深的话。@BrianAyers我们如何在这里插入条件语句？这是一个很好的答案。更多信息可以在MDN上找到这是我整个星期学到的最好的东西。我只是。。。是。。。如此美丽！这对我来说是一个很好的解决方案，但IE11不支持模板文本。真是太好了！！这是非常有用的，特别是当HTML代码来自其他源代码时。谢谢，这救了我一天！非常感谢你，我不知道我们可以用背虱！

 var template = $('#template').html();
 // You can pass dynamic template values
  var rendered = Mustache.render(template, {name: "Luke"});
  $('#target').html(rendered);

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("")
};

    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>`;

var htmlString =

`

<span>Your</span>
<p>HTML</p>

`