Question

将一段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

Answer 1

问候！我知道这是一篇较旧的帖子，但我在搜索“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'标记内）

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

Answer 2

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

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

Answer 3

我们可以使用反引号（``）而不会出现任何错误。例如：<div>"test"<div>

我们可以在ES6 javascript标准中引入的反引号中存储大模板（HTML）

无需转义任何特殊字符

如果没有反引号..我们需要通过附加反斜杠来转义字符（）例如：“\”test \“”

Answer 4

我建议使用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);

还有很多功能。

Answer 5

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

http://jsperf.com/zp-string-concatenation/6

米，

Answer 6

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

Answer 7

请在 html 字符串的前后使用符号反引号 '`'，这就是所谓的模板文字，现在您可以在多行中编写纯 html 并分配给变量。

示例 >>

var htmlString =

`

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

`

Answer 8

您可以创建一个javascript对象，其key为html代码段的名称，value为连接在一起的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代码块分配给一个javascript变量

8 个答案: